Current_page or Current_ancestors issue

  • Hello,

    I’m having a basic issue which I am not sure if it’s related to CSS or a PHP function in WordPress. So here goes my question…

    How do I keep the blue bar hovering over say…the “about” page, but still have the sub nav colored in blue to help indicate the next level down from that parent page.

    Here is my link to the website: https://www.newhealthbygayle.com/

    The top level nav dictates the parent pages of the website. When you’re on that parent page, you will notice a blue bar to help indicate which page you are currently in. I also have a sub navigation to the left of the site which acts as the sub nav of that parent page. When you’re in one of the sub nav pages, the text should be in blue to help indicate which page you’re in, but ALSO the blue bar should still be visible above the parent page.

    I hope I explained this right and I would appreciate it if you can point me to the correct CSS or PHP functions.

    Thank you!!

Viewing 14 replies - 1 through 14 (of 14 total)

  • What Theme are you using?

    Thread Starter jlau

    (@jlau)

    This is a custom theme.

    I just need to know what function, php, or css rule to activate the change.

    -thanks

    Firefox Firebug and/or Chrome Developer Tools are your friend here.

    The two CSS classes you want to target are current_page_ancestor and current_page_parent.

    Thread Starter jlau

    (@jlau)

    my files are divided in a different way. The sidebar navigation is on it own separate .php file and it is not dynamic.

    This may be an issue…

    It shouldn’t matter.

    Can you post the code used to generate your header nav menu, as well as the code used to generate your sidebar nav menu?

    (If code exceeds about 10 lines, please post to a Pastebin: https://www.pastebin.com and post a link in your reply.)

    Thread Starter jlau

    (@jlau)

    header nav menu:

    <nav class="nav-menu">
	<ul>
	  <li><a href="<?php bloginfo('home'); ?>" title="<?php bloginfo('description'); ?>">HOME</a></li>
          <?php wp_list_pages('title_li=&depth=1' ); ?>
	</ul>
</nav>
    Thread Starter jlau

    (@jlau)

    sidenav menu:

    <nav class="nav-sub">
<ul>
<li><a href="https://www.newhealthbygayle.com/about/meet-gayle/">MEET GAYLE</a></li>
<p>About the founder</p>
<li><a href="https://www.newhealthbygayle.com/about/missionvalue/">MISSION/VALUES</a></li>
<p>Mission statement</p>
<li><a href="https://www.newhealthbygayle.com/about/frequently-asked-questions/">FREQUENTLY ASKED QUESTIONS</a></li>
<p>Got a question?</p>
<li><a href="https://www.newhealthbygayle.com/about/resources/">RESOURCES</a></li>
<p>Additional resources</p>
</ul>
</nav>

    Okay, if you’re using wp_list_pages(), then as I said above, the CSS classes you need to target are current_page_ancestor and current_page_parent.

    Thread Starter jlau

    (@jlau)

    Which class goes to which menu?

    The sidebar nav menu shouldn’t matter, even though it is hard-coded; it doesn’t have any impact on the output of wp_list_pages() in your header nav menu, which relies only on your defined Page hierarchy.

    Which class goes to which menu?

    Those classes will be output by wp_list_pages(), which is used to output your header nav menu.

    Thread Starter jlau

    (@jlau)

    Thanks! I’ll give that a try in the next hour or so.

    Thread Starter jlau

    (@jlau)

    Hey thanks, it works now! But my other issue is the sub nav. Text color should be in blue to help indicate you’re in the sub pages of the parent page. If that makes sense?

    .nav-sub ul li.current_page_item a {color:#2d8ebe;}

    If you want dynamic styling of the sidebar nav menu, based on current location, you’re going to need to apply CSS selectors (either classes or IDs) to each sidebar nav menu list item, and then target them using CSS.

    Or, replace your hard-coded sidebar nav menus with analogous calls to wp_list_pages(), so that you can use the standard WordPress classes for the list items.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Current_page or Current_ancestors issue’ is closed to new replies.