I installed the classifieds theme in Wordpress.The menu which I created for the previous theme can be seen in my new theme, but it is not visible when I take my cursor on the menu den only I can see the menu.
Kindly share the URL of your website. I think this is css styling issue.
Seems like the superfish menu plugin is not setting the CSS properties correctly when hovering over the menu item.Modify like below
sample css
.nav2 li.sfHover ul, ul.nav2 li:hover ul {
background: none repeat scroll 0 0 #B3B3B3;
color: #FFFFFF;
text-decoration: none;
z-index: 1000;
visibility: visible!important;
display: block!important;
}
Related
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
I can't for the life of me figure out why the drop down when hovering over the "about" menu item is appearing behind the images, see this link http://www.ziprfit.com.au/index.php (I hope it's OK to post the link).
All search results suggest z-index, well the z-index for the images in there goes to 6, and I've set the menu to 100 and it still appears behind the images.
On the server side this is generated by PHP.
Thanks for your help.
Add position: relative; in your #nav ul ul
#nav ul ul {
z-index: 100;
display: none;
position: relative;
}
Add position: relative; and z-index: 100; to your #nav div :)
Having an issue involving a site in development. One page has a wordpress blog integrated into it. I have scrolltofixed running, but the issue is that on the page with the blog, the menu has a greater height then my other pages (no wordpress). (cloned the twenty eleven theme)
Blog page with "thicker" menu -> http://mandysaile.com/blog/
vs
"Regular" page http://mandysaile.com/getintouch/
I assume the issue is a css conflict somewhere, but can't track it down. Tried using firebug to figure it out, but no joy as of yet. The menu being used is not via wordpress (as only the blog page is a wordpress page). Ideas?
In your blog you have this:
body{font: 300 15px/1.625 "Helvetica Neue",Helvetica,Arial,sans-serif;}
which is not in your original page.
You can solve it in 2 ways:
1) add this code to your original page (or remove from blog)
2) if you need to keep this font declaration as is for any reason, simply change #menu li a to this:
#menu li a {
display: block;
padding: 0px 30px;
font-family: "amazonebt";
text-decoration: none;
font-size: 22px;
color: #3F5B5F;
font-weight: normal;
}
I am working with the site cardinalmma.com/ but you can see that the menu is not centered. For example see the news menu its in the left portion but with some padding. I want it to be centered can anyone help me.
thanks
Somdeb
You want the individual navbar labels centered, correct?
li.menu-item {
text-align: center;
}
This targets the <li> tags in your menu, identified by the .menu-item class. The text-align: center; rule takes care of centering the <a> tag with your text in it.
In my browser, this modification makes it look like this:
Try something in your css stylesheet to make the menu items be align center.
try something with the class menu and the li part:
.menu {
text-align: center;
}
Or something in that direction
Please update your css. This should resolve your issue.
.menu_top a {
color: #eee;
font-weight: bold;
line-height: 3.4em;
padding: 0 14px;
text-decoration: none;
height: 50px !important;
text-align: center;
display: block;
}
.menu_top ul ul li a {
text-align:left;
}
To center the navbar labels use this css courtesy of Surreal Dreams:
li.menu-item {
text-align: center;
}
Now to elaborate on how to find this solution. The best way to edit/develop CSS for wordpress is to use firebug or Chrome's developer tools to find the element you want to modify.Then you can add CSS right there and see the results real-time (these changes are not permanent). I would say it is likely this is how Surreal Dreams found the solution.
If you want to learn more about using the Chrome dev tools tool go to this page: https://developers.google.com/chrome-developer-tools/.
If you are new to CSS (I dont know if you are new to CSS or if youre problem is strictly editing CSS) for wordpress you should go check out http://www.codecademy.com/tracks/web
I'm pretty sure I'm not getting the hierarchy in css for building this. I can't seem to find a place that will actually explain it to me, and how each level works. I've found some that show, but when you build it if you don't know, at least for me, it's kind of hard to see. Never really used css suprisingly until now. If someone wouldn't mind pointing out my error and explaining it please. :)
I'm just trying to add a 2nd drop down (a drop down to my drop down) that will show up horizontally under the initial hidden drop down, when selecting the correct one so the correct php id will populate in the link. I included the PHP just so if I put it in wrong someone could point that out to me as well.
also to add: the 2nd level hidden drop down links seem to be there when I hover over "project" instead of when hovering over the populated projects like it should. The weird thing is the links don't actually show up (not visible), but if i put my mouse there ie lets me know theres a link.
http://jsfiddle.net/HHwLH/
In your css
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: inline;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
}
your sub menu and sub sub menu is affected by this.
When you hover on the li all ul descendants will be affected (submenu and subsubmenu)
in your markup the uls are children of the li so you can use the children selector instead of the descendant selector to only show the direct child menu/ul.
#navbar li:hover > ul, #navbar li.hover > ul {
position: absolute;
display: inline;
left: 0px;
width: 100%;
margin: 0px;
padding: 0px;
}
This will work for both submenu and subsubmenu
FIDDLE