Support » Fixing WordPress » Highlight 1st level pages in Menu when on 1st and 2nd level pages using wp_nav_m

  • Resolved Alx Block

    (@cronkled)


    Ok. This might be a weird one.

    I’m trying to use the wp_nav_menu to highlight the Main nav when you’re on both 1st and 2nd level pages. In this case, I only want the 1st level pages to be part of the main nav, but I want the 1st level menu item to be highlighted when you’re on a 2nd level page.

    For example, the ABOUT tab should highlight when you’re on /about AND /about/about-me. Right now it’s only highlighting on /about.

    Here’s the build http://getthere-fromhere.com

    Here’s what I’m calling into my header:

    <?php wp_nav_menu( array( 'theme_location' => 'header-menu' )); ?>

    This is what I have in functions.php:

    function register_my_menus() {
    register_nav_menus(
    array(
    'header-menu' => __( 'Header Menu' )
    )
    );
    }
    
    add_action( 'init', 'register_my_menus' );

    And here’s the CSS, if you think you need it:

    #NavGlobal		{height:67px;overflow:hidden;font-weight:bold;font-size:11px;width:610px; margin:0 auto;}
    #NavGlobal ul	{list-style-type:none;padding:0;margin-left:3px;}
    #NavGlobal li	{float:left;xbackground:#999;padding:0px;margin:0px;}
    #NavGlobal a	{height:80px;display:block;width:98px;color:#6b7b30;text-decoration:none;padding:3px 0px;margin:30px 3px 0px 0px;
    						background:url('images/bkgdNav_i0.jpg');}
    #NavGlobal a.i0			{margin:20px 3px 0px 0px;background:url('images/bkgdNav_i0.jpg');background-repeat:no-repeat;}
    #NavGlobal a:hover		{color:#990033;}
    #NavGlobal a.current	{color:#990033;margin:5px 3px 0px 0px;background:url('images/bkgdNav_current.jpg');}
    #NavGlobal .current_page_item a{color:#990033;margin:5px 3px 0px 0px;background:url('images/bkgdNav_current.jpg');}
Viewing 7 replies - 1 through 7 (of 7 total)
  • you need to style

    .current_page_parent
    and
    .current_page_ancestor

    similar to the existing:
    #NavGlobal .current_page_item a {}

    Thanks, alchymyth. That didn’t seem to work for me.

    I now have:

    #NavGlobal .current_page_parent {color:#990033;margin:5px 3px 0px 0px;background:url('images/bkgdNav_current.jpg');}
    #NavGlobal .current_page_ancestor {color:#990033;margin:5px 3px 0px 0px;background:url('images/bkgdNav_current.jpg');}

    And I get the same result.

    Any other thought?

    you need to style the link, similar to the existing style:

    #NavGlobal .current_page_parent a, #NavGlobal .current_page_ancestor a
     {}

    Makes sense, but it’s still not working.

    I’m really not sure why though. Man this thing has been bugging me for days at this point.

    have you cleared the browser cache? by pressing (ctrl f5) or relaod button?

    btw: i can’t see the new styles in jgb_200705.css, if that is where you added them.

    Wow. That’s so so odd. I added them in, but when I take a look at that .css through firebug, they’re not in there.

    They are in there though, for sure.

    #NavGlobal .current_page_parent a{color:#990033;margin:5px 3px 0px 0px;background:url('images/bkgdNav_current.jpg');}
    #NavGlobal .current_page_ancestor a{color:#990033;margin:5px 3px 0px 0px;background:url('images/bkgdNav_current.jpg');}

    Alchymyth. You’re right. I was being an idiot! I was still pulling in the stylesheet from the staging server, and trying to change the local one! Man. This thing had me fried.

    That worked just fine. Exactly what I needed! You’re awesome!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Highlight 1st level pages in Menu when on 1st and 2nd level pages using wp_nav_m’ is closed to new replies.