-2

I have Drupal 9 with the Olivero theme. How to force the display of submenus ?

I want my main menu unfolded in mobile navigation.

This will make navigation on mobile more intuitive and limit the number of actions to navigate.

Here is the HTML code for the collapsed menu :

<nav id="block-subtheme-olivero-main-menu" class="primary-nav block block-menu navigation menu--main" aria-labelledby="block-subtheme-olivero-main-menu-menu" role="navigation">
            
  <h2 class="visually-hidden block__title" id="block-subtheme-olivero-main-menu-menu">Main navigation</h2>

    <ul class="menu primary-nav__menu primary-nav__menu--level-1" data-drupal-selector="primary-nav-menu--level-1" data-once="olivero-automatic-mobile-nav">

        <li class="primary-nav__menu-item primary-nav__menu-item--link primary-nav__menu-item--level-1 primary-nav__menu-item--has-children" data-drupal-selector="primary-nav-menu-item-has-children">

                      <a href="/culture-geek" class="primary-nav__menu-link primary-nav__menu-link--link primary-nav__menu-link--level-1 primary-nav__menu-link--has-children" data-drupal-selector="primary-nav-menu-link-has-children" data-drupal-link-system-path="taxonomy/term/14">            <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-1">Culture geek</span>
          </a>
                              
                <button class="primary-nav__button-toggle" data-drupal-selector="primary-nav-submenu-toggle-button" aria-controls="primary-menu-item-1" aria-expanded="false">
                  <span class="visually-hidden">sous-navigation Culture geek</span>
                  <span class="icon--menu-toggle"></span>
                </button>
                
              <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕"></span>
    
    <ul class="menu primary-nav__menu primary-nav__menu--level-2" data-drupal-selector="primary-nav-menu--level-2" id="primary-menu-item-1">

        <li class="primary-nav__menu-item primary-nav__menu-item--link primary-nav__menu-item--level-2">

                      <a href="/crypto" class="primary-nav__menu-link primary-nav__menu-link--link primary-nav__menu-link--level-2" data-drupal-link-system-path="taxonomy/term/2">            <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-2">Crypto</span>
          </a>

                  </li>

          </ul>

                  </li>

          </ul>

  </nav>

Here is the HTML code of the unfolded menu :

<nav id="block-subtheme-olivero-main-menu" class="primary-nav block block-menu navigation menu--main" aria-labelledby="block-subtheme-olivero-main-menu-menu" role="navigation">
            
  <h2 class="visually-hidden block__title" id="block-subtheme-olivero-main-menu-menu">Main navigation</h2>

    <ul class="menu primary-nav__menu primary-nav__menu--level-1" data-drupal-selector="primary-nav-menu--level-1" data-once="olivero-automatic-mobile-nav">

        <li class="primary-nav__menu-item primary-nav__menu-item--link primary-nav__menu-item--level-1 primary-nav__menu-item--has-children" data-drupal-selector="primary-nav-menu-item-has-children">
                              
                      <a href="/culture-geek" class="primary-nav__menu-link primary-nav__menu-link--link primary-nav__menu-link--level-1 primary-nav__menu-link--has-children" data-drupal-selector="primary-nav-menu-link-has-children" data-drupal-link-system-path="taxonomy/term/14">            <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-1">Culture geek</span>
          </a>
                           
                <button class="primary-nav__button-toggle" data-drupal-selector="primary-nav-submenu-toggle-button" aria-controls="primary-menu-item-1" aria-expanded="true">
                  <span class="visually-hidden">sous-navigation Culture geek</span>
                  <span class="icon--menu-toggle"></span>
                </button>
        
              <span data-drupal-selector="primary-nav-menu-🥕" class="primary-nav__menu-🥕 is-active-menu-parent"></span>
    
    <ul class="menu primary-nav__menu primary-nav__menu--level-2 is-active-menu-parent" data-drupal-selector="primary-nav-menu--level-2" id="primary-menu-item-1">

        <li class="primary-nav__menu-item primary-nav__menu-item--link primary-nav__menu-item--level-2">
                              
                      <a href="/crypto" class="primary-nav__menu-link primary-nav__menu-link--link primary-nav__menu-link--level-2" data-drupal-link-system-path="taxonomy/term/2">            <span class="primary-nav__menu-link-inner primary-nav__menu-link-inner--level-2">Crypto</span>
          </a>

                  </li>

          </ul>

                  </li>

          </ul>

  </nav>
1
  • Is this not css media queries?
    – Kevin
    Jul 8 at 13:02

0

Browse other questions tagged or ask your own question.