WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Highlight 1st level pages in Menu when on 1st and 2nd level pages using wp_nav_m (8 posts)

  1. Alx
    Member
    Posted 3 years ago #

    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');}
  2. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    you need to style

    .current_page_parent
    and
    .current_page_ancestor

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

  3. Alx
    Member
    Posted 3 years ago #

    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?

  4. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

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

    #NavGlobal .current_page_parent a, #NavGlobal .current_page_ancestor a
     {}
  5. Alx
    Member
    Posted 3 years ago #

    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.

  6. alchymyth
    The Sweeper & Moderator
    Posted 3 years ago #

    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.

  7. Alx
    Member
    Posted 3 years ago #

    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');}
  8. Alx
    Member
    Posted 3 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic