Highlight Current Page in WordPress 3.0 Menus

  • Resolved Josh M.

    (@ebiz_helper)


    13 years, 4 months ago

    Hello,

    I am building a theme: http://wp-themes-and-plugins.com/ and am trying to highlight the current page ( active ) in the top navigation menu. I’m using the ( 3.0 menu system )

    For functions.php – code I’m using: `<? if (function_exists(‘add_theme_support’)) {
    add_theme_support(‘menus’);
    } ?>`

    For the header.php – code I’m using: <?php wp_nav_menu('menu=main_menu'); ?>

    I can not seem to get the current page menu title to highlight when active. I’ve used resources from several different sources that provide tutorials on doing this – none of them work for me.

    Resources I’ve tried:

    Any assistance will be very much appreciated.

    Thanks in advance

Viewing 6 replies - 1 through 6 (of 6 total)
  • Michael

    (@alchymyth)

    13 years, 4 months ago

    if you look into the html code in your browser, and examine the css classes of the active link, for instance of the ‘blog’ page:

    <li id="menu-item-7" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-2 current_page_item current_page_parent menu-item-7"><a href="http://wp-themes-and-plugins.com/blog/">Blog</a></li>

    you will find a few css classes; for instance:

    .current-menu-item
    .current_page_item

    which you can use to style the active menu item; for instance:
    .current-menu-item a { background: green; }

    another useful resource = free tool:

    firefox web developer add-on

    Thread Starter Josh M.

    (@ebiz_helper)

    13 years, 4 months ago

    Hello alchymyth, thanks for you help.

    I am using ff web developer & fire bug – and also I have used the classes you mentioned above, but for some reason the current page still isn’t highlighting.

    I’ve tried many variations, you can see it “not” working by clicking one of the links: http://wp-themes-and-plugins.com/products-page/ – if you want I will post wp-admin credentials for your testing.

    You can see the classes added to my stylesheet,

    Please advise…

    Michael

    (@alchymyth)

    13 years, 4 months ago

    it seems to be a hierarchy issue, with some other style overpowering the ‘simple’ current styles;

    however, these styles seem to work:

    #topnav li.current-menu-item a { background-color:#B2C629; }
#topnav li.current_page_item  a { background-color:#B2C629; }
    Thread Starter Josh M.

    (@ebiz_helper)

    13 years, 4 months ago

    Worked perfectly – thanks

    ivanjunge

    (@ivanjunge)

    13 years, 4 months ago

    I love it! For me the container is called topMenu. You can change the background image with it like this too:

    #topMenu li.current-menu-item a {
    display:block;
    float:left;
    background:url(‘images/menu_002_h.jpg’) repeat-x;
    color:#fff;
    text-transform:uppercase;
    font-size:11px;
    font-weight:bold;
    line-height:35px;
    border:solid #e1e1d3;
    border-width:1px 1px 0 0;
    text-decoration:none;
    padding:0 25px;
    }

    e.novak.paul@gmail.com

    (@enovakpaulgmailcom)

    12 years, 5 months ago

    Hi.

    This is really sound advice, but does anyone know how to make it so each menu item can be highlighted a different colour each?

    e.g

    menu item 1 orange on page 1
    menu item 2 brown on page 2
    menu item 3 grenn on page 3

    and so on…

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Highlight Current Page in WordPress 3.0 Menus’ is closed to new replies.