Style Main Nav for Child Pages?

  • Resolved Paul

    (@paulburd)


    4 years, 7 months ago

    When you’re on a top-level (parent) page the main nav link for that page is a different color, indicating you’re on that page. I want to have all child pages of that parent page maintain the ‘selected’ color, indicating what section you’re in. For the life of me I can’t get any css to to do this. I’ve tried standard things like, ‘li.current-page-ancestor a’ or ‘.current_page_item’ but nothing seems to work.

    The problem appears to be the current-page, current_item, etc… class isn’t assigned when viewing a child page.

    Any help would be appreciated.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author ThemezHut

    (@pubudu-malalasekara)

    Hi @paulburd,

    Following code will do the job. If it didn’t please reply me with your website URL.

    
.main-navigation .page_item_has_children ul li a {
	color: #38b5a0 !important;
}
    • This reply was modified 4 years, 7 months ago by ThemezHut.
    Thread Starter Paul

    (@paulburd)

    Thanks for the reply, @pubudu-malalasekara,

    Unfortunately that didn’t have any affect. It looks as though the .page_item_has_children class is never being added.

    Here’s the html output for the menu. The page being viewed is a child of “Media Library”.

    <nav id="site-navigation" class="main-navigation">
	<div id="site-navigation-inner" class="align-left">
		
		<div class="menu-main-menu-container">
			<ul id="primary-menu" class="menu">
				<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-20"><a href="#">Media Library</a></li>
				<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="#">Documentation</a></li>
				<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="#">Contact Us</a></li>
				<li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143"><a href="#">Log Out</a></li>
			</ul>
		</div>
		
		<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><i class="fa fa-bars"></i>Menu</button>
	</div>
</nav>

    fyi… here’s the html output when the “Media Library” page itself is selected:

    <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20">
	<a href="#" aria-current="page">Media Library</a>
</li>
    Theme Author ThemezHut

    (@pubudu-malalasekara)

    Hi @paulburd,

    It will be easier for me to give you the exact code if you can share the URL. Isn’t your website live yet?

    Thread Starter Paul

    (@paulburd)

    Hi @pubudu-malalasekara,

    Unfortunately it’s a private site with proprietary content. I’m not allowed to give access.

    I was hoping you may be able to diagnose the issue from the outputted html. I didn’t edit any core files and I don’t believe I did anything to override the html, so this should be just like an off-the-shelf install.

    Thanks,

    Paul

    Thread Starter Paul

    (@paulburd)

    I figured it out! The link to my parent page in the main nav was added to the menu as a “Custom Link” instead of a “Page”. With this configuration the required classes weren’t being assigned to the menu item. Changing the menu item to a “Page” link fixed the problem.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Style Main Nav for Child Pages?’ is closed to new replies.