Highlighting "main" menu items when sub menu item selected

  • Resolved questionforu

    (@questionforu)


    9 years, 10 months ago

    I’ve tried a lot of the things out there related to this, but I can’t seem to be get mine to work.

    I’m using the following to display a navigation arrow on my main menu on hover and when that item is selected. IE. The “Home” page is currently selected therefore the menu displays the arrow indicating that you’re on that page. For main menu items with sub categories I want the “Main” menu item to display the arrow when a sub navigation menu below that is selected.

    .menu .current_page_item a, .current_page_item a:hover {background-image:url(images/current-arrow.png);}

    The main menu is responsive so the code gets pretty long, so I won’t post it.

    I most recently tried the following, but it didn’t work either.

    .menu ul li.current-menu-ancestor > a { background-image:url(images/current-arrow.png); }
.menu ul li.current-menu-parent > a { background-image:url(images/current-arrow.png); }

    I appreciate any help, thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter questionforu

    (@questionforu)

    9 years, 10 months ago

    Here is a snippet of the menu without posting the whole menu.

    <ul id="menu-primary-menu-1" class="menu responsiveSelectFullMenu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1209"><a href="http://server.com/">Home</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-parent menu-item-274"><a href="#">About Us</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90"><a href="http://server.com/history/">History</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-53 current_page_item menu-item-55"><a title="Core Values" href="http://server.com/core-values/">Core Values</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://server.com/safety-affliations/">Safety Affliations</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a title="Associates" href="http://server.com/another-dropdown/">Associates</a></li>
</ul>
    johnfotios

    (@johnfotios)

    9 years, 10 months ago

    Surely li.current-menu-parent > a works?

    As the parent li has that class.

    It’s got nothing to do with :hover, as I assume you want this current-arrow.png to display while you’re actually on the sub page?

    Weird that it’s not, would you post a link to the site?

    Thread Starter questionforu

    (@questionforu)

    9 years, 10 months ago

    Thank you johnfotios!

    Your line “Surely li.current-menu-parent > a works?” got the wheels turning again, and I was able to get it to work with the following.

    .menu li.current-menu-parent > a { css code here }

    Sorry for any confusion, the hover is what the main menu level uses to display a main category, but now it’s working for all.

    johnfotios

    (@johnfotios)

    9 years, 10 months ago

    Oh I see, the .menu was the class for the ul, so ul.menu > li, rather than .menu ul > li

    Ha 🙂

    Thread Starter questionforu

    (@questionforu)

    9 years, 10 months ago

    Yeah, hey it’s Friday…thanks again.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Highlighting "main" menu items when sub menu item selected’ is closed to new replies.

Tags