Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › li menu current class not working properly.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 15, 2011 at 9:53 pm #32744
    mdesigns
    Member

    Hello, I have a UL nav menu on my wordpress blog. I tried adding a current class so that the current page button would turn orange, however, no matter which page you’re on, only the home button turns orange. Any ideas?

    Here is the menu code:

    And here is my css:


    
#menu{
    
width:1200px;
    
height:61px;
    
background:url(images/fm_menu_bg.jpg) repeat-x;
    
}
    
#menu ul{
    
width:85%;
    
margin:0 auto;
    
list-style:none;
    
}
    
#menu li{
    
list-style:none;
    
display:block;
    
float:left;
    
font-size:11px;
    
font-weight:bold;
    
height:61px;
    
line-height:61px;
    
margin:0 5px;
    
}
    
#menu li a{
    
display:block;
    
float:left;
    
height:61px;
    
color:#99a2b7;
    
text-decoration:none;
    
text-transform:uppercase;
    
padding:0 20px;
    
}
    
#menu li a:hover{
    
background:url(images/fm_hover_bg.jpg) repeat-x;
    
color:#fff;
    
}
    
#menu li a:hover span, #menu li .current span{
    
background:url(images/fm_hover_pointer.jpg) no-repeat top;
    
height:61px;
    
display:block;
    
float:left;
    
}
    
#menu li .current{
    
display:block;
    
float:left;
    
height:61px;
    
background:url(images/fm_hover_bg.jpg) repeat-x;
    
color:#fff;
    
text-decoration:none;
    
text-transform:uppercase;
    
padding:0 20px;
    
}

    Here’s the site http://bit.ly/k2R4xT, any help would be greatly appreciated. Thanks in advance!

    May 15, 2011 at 11:05 pm #76007
    TheDoc
    Member

    If you have hard-coded the ‘current’ class into the HTML (as seen above), it will always be the one that looks like the current page.

    If you were to use WP3.0’s menu system, you can get WordPress to automatically add the ‘current’ class to each page.

    May 16, 2011 at 1:59 pm #75965
    mdesigns
    Member

    That was the way it was coded in the example and the example works just fine, when I remove the current class from the HTML then none of the pages look like the current page. I would use WP’s menu system but I don’t know how to convert this menu to wordpress format

    May 16, 2011 at 6:51 pm #75957
    TheDoc
    Member

    What example are you referring to?

    Adding class=”current” to a template is not dynamic. It will be set as that on every single page.

    If you aren’t going to use WordPress’ built in function, then you’ll need to use the body class to specify things. You’ll need to change your menu to something like this:

    Then in your CSS you can say:

    .page-## ul a#home, .page-## ul a#about, .page-## ul a#blog, .page-## ul a#services{
    
background:url(images/fm_hover_bg.jpg) repeat-x;
    
}

    Where each ‘##’ represents the ID of the page you are currently on.

    If your body tag does not currently have any tags attached to it, you’ll need to do something like this:

    >
    May 16, 2011 at 6:59 pm #75953
    mdesigns
    Member

    I was referring to the example from the site I downloaded the menu from, but a friend of mine was able to convert it into the WordPress 3.0 menu style, thank you very much for your time!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.