2. Algorithm
  3. menus - Highlight parent if item from submenu is active

menus - Highlight parent if item from submenu is active

admin2025-06-06  0

I have a menu, but when I go to the submenu page, the parent of this submenu is not highlighted. How to do this?

When it doesn't have a submenu, it works fine:

My menu structure is:

<nav class="x-nav-wrap desktop" role="navigation">
  <ul id="menu-x-demo-menu" class="partial-refreshable-nav-menu partial-refreshable-nav-menu-1 x-nav">
    <li id="menu-item-224" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-224 tax-item tax-item-1"><a href=".php/category/newsy/"><span>Newsy</span></a></li>
    <li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5"><a href="/"><span>O nas</span></a></li>
    <li id="menu-item-197" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-197"><a href="#"><span>Dorośli</span></a>
      <ul class="sub-menu">
        <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200"><a href=".php/o-szkole/"><span>O szkole</span></a></li>
        <li id="menu-item-310" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310"><a href=".php/program-ksztalcenia-dorosli-dorosli/"><span>Program kształcenia i opłaty</span></a></li>
        <li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-202"><a href=".php/rekrutacja/"><span>Rekrutacja</span></a></li>
        <li id="menu-item-199" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-199"><a href=".php/kadra/"><span>Kadra</span></a></li>
        <li id="menu-item-279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href=".php/galeria-dorosli-i-mlodziez/"><span>Galeria</span></a></li>
      </ul>
    </li>
    <li id="menu-item-208" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-208"><a href="#"><span>Młodzież</span></a>
      <ul class="sub-menu">
        <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href=".php/o-szkole-mlodziez/"><span>O szkole</span></a></li>
        <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-81 current_page_item menu-item-206"><a href=".php/program-ksztalcenia-dorosli/"><span>Program kształcenia i opłaty</span></a></li>
        <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-207"><a href=".php/rekrutacja/"><span>Rekrutacja</span></a></li>
        <li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href=".php/kadra/"><span>Kadra</span></a></li>
        <li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href=".php/galeria-dorosli-i-mlodziez/"><span>Galeria</span></a></li>
      </ul>
    </li>
    <li id="menu-item-321" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-321"><a href="#"><span>Dzieci</span></a>
      <ul class="sub-menu">
        <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href=".php/dzieci/"><span>O szkole</span></a></li>
        <li id="menu-item-337" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-337"><a href=".php/program-ksztalcenia-dzieci/"><span>Program kształcenia</span></a></li>
        <li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-342"><a href=".php/rekrutacja-dzieci/"><span>Rekrutacja</span></a></li>
        <li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href=".php/kadra/"><span>Kadra</span></a></li>
        <li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343"><a href=".php/galeria-dzieci/"><span>Galeria</span></a></li>
      </ul>
    </li>
    <li id="menu-item-280" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-280"><a href=".php/galeria-dorosli-i-mlodziez/"><span>Galeria</span></a>
      <ul class="sub-menu">
        <li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href=".php/galeria-dorosli-i-mlodziez/"><span>Dorośli i Młodzież</span></a></li>
        <li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264"><a href=".php/galeria-dzieci/"><span>Dzieci</span></a></li>
      </ul>
    </li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href=".php/szkolenia/"><span>Seniorzy</span></a></li>
    <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href=".php/kontakt/"><span>Kontakt</span></a></li>
    <li class="menu-item x-menu-item x-menu-item-search"><a href="#" class="x-btn-navbar-search"><span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a></li>
  </ul>
</nav>

I have a menu, but when I go to the submenu page, the parent of this submenu is not highlighted. How to do this?

When it doesn't have a submenu, it works fine:

My menu structure is:

<nav class="x-nav-wrap desktop" role="navigation">
  <ul id="menu-x-demo-menu" class="partial-refreshable-nav-menu partial-refreshable-nav-menu-1 x-nav">
    <li id="menu-item-224" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-224 tax-item tax-item-1"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/category/newsy/"><span>Newsy</span></a></li>
    <li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5"><a href="http://serwer1475046.home.pl/pstrony/vocal/"><span>O nas</span></a></li>
    <li id="menu-item-197" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-197"><a href="#"><span>Dorośli</span></a>
      <ul class="sub-menu">
        <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/o-szkole/"><span>O szkole</span></a></li>
        <li id="menu-item-310" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-310"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/program-ksztalcenia-dorosli-dorosli/"><span>Program kształcenia i opłaty</span></a></li>
        <li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-202"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/rekrutacja/"><span>Rekrutacja</span></a></li>
        <li id="menu-item-199" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-199"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/kadra/"><span>Kadra</span></a></li>
        <li id="menu-item-279" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-279"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/galeria-dorosli-i-mlodziez/"><span>Galeria</span></a></li>
      </ul>
    </li>
    <li id="menu-item-208" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-208"><a href="#"><span>Młodzież</span></a>
      <ul class="sub-menu">
        <li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-205"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/o-szkole-mlodziez/"><span>O szkole</span></a></li>
        <li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-81 current_page_item menu-item-206"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/program-ksztalcenia-dorosli/"><span>Program kształcenia i opłaty</span></a></li>
        <li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-207"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/rekrutacja/"><span>Rekrutacja</span></a></li>
        <li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-204"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/kadra/"><span>Kadra</span></a></li>
        <li id="menu-item-278" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-278"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/galeria-dorosli-i-mlodziez/"><span>Galeria</span></a></li>
      </ul>
    </li>
    <li id="menu-item-321" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-321"><a href="#"><span>Dzieci</span></a>
      <ul class="sub-menu">
        <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/dzieci/"><span>O szkole</span></a></li>
        <li id="menu-item-337" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-337"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/program-ksztalcenia-dzieci/"><span>Program kształcenia</span></a></li>
        <li id="menu-item-342" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-342"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/rekrutacja-dzieci/"><span>Rekrutacja</span></a></li>
        <li id="menu-item-273" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-273"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/kadra/"><span>Kadra</span></a></li>
        <li id="menu-item-343" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/galeria-dzieci/"><span>Galeria</span></a></li>
      </ul>
    </li>
    <li id="menu-item-280" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-280"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/galeria-dorosli-i-mlodziez/"><span>Galeria</span></a>
      <ul class="sub-menu">
        <li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/galeria-dorosli-i-mlodziez/"><span>Dorośli i Młodzież</span></a></li>
        <li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-264"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/galeria-dzieci/"><span>Dzieci</span></a></li>
      </ul>
    </li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/szkolenia/"><span>Seniorzy</span></a></li>
    <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://serwer1475046.home.pl/pstrony/vocal/index.php/kontakt/"><span>Kontakt</span></a></li>
    <li class="menu-item x-menu-item x-menu-item-search"><a href="#" class="x-btn-navbar-search"><span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> Search</span></span></a></li>
  </ul>
</nav>
  • menus
  • css
  • html
Share Improve this question edited Mar 8, 2016 at 7:55 Gabriel 2,24810 gold badges22 silver badges24 bronze badges asked Mar 7, 2016 at 11:48 patrykkpatrykk 11 bronze badge 1
  • The user asking the question is not active anymore, therefore, we are unable to ask for clarification. Also, because of inactivity he or she cannot accept an answer making this open question pointless. – Remzi Cavdar Commented Nov 2, 2018 at 20:22
Add a comment  | 

1 Answer 1

Reset to default 2

Use the classes current-menu-ancestor current-menu-parent and menu-item-has-children

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1749210599a317287.html

menusHighlight parent if item from submenu is active

最新回复(0)