Anyone rewrite the header.html.twig for menu hierarchy

Support Content & Markdown
1

i am trying to do the “submenu” in the twenty-theme into a menu (everything is under “Layouts” in the demo should be shown one level above next to “welcome”. im not used in writing twig. could anyone help? here is the code:
could someone help? i think its not complicated, but for me it is :wink:

<header id="header" class="{{ page.header.header_class }}">
  <h1 id="logo"><a href="{{ base_url_absolute }}">{{ site.logo.text1 }} <span>{{ site.logo.text2 }}</span></a></h1>
  <nav id="nav">
    <ul>
      <li class="current"><a href="{{ base_url_absolute }}">Home</a></li>
      <li class="submenu">
        <a href="">Layouts</a>
        <ul>
          {% for page in pages.children %}
          {% if page.visible %}
          {% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
          <li class="{{ current_page }}">
            <a href="{{ page.url }}">
              {{ page.menu }}
            </a>
          </li>
          {% endif %}
          {% endfor %}
          {% for mitem in site.menu %}
          <li>
            <a href="{{ mitem.link }}">{{ mitem.text }}</a>
          </li>
          {% endfor %}
          {% if site.submenu %}
          <li class="submenu">
            <a href="">Submenu</a>
            <ul>
              {% for submenu in site.submenu %}
              <li><a href="{{ submenu.link }}">{{ submenu.text }}</a></li>
              {% endfor %}
            </ul>
          </li>
          {% endif %}
        </ul>
      </li>
  {% for button in site.buttons %}
      <li><a href="{{ button.link }}" class="button special">{{ button.text }}</a></li>
      {% endfor %}
    </ul>
  </nav>
</header>
2 
<header id="header" class="{{ page.header.header_class }}">
  <h1 id="logo"><a href="{{ base_url_absolute }}">{{ site.logo.text1 }} <span>{{ site.logo.text2 }}</span></a></h1>
  <nav id="nav">
    <ul>
      <li class="current"><a href="{{ base_url_absolute }}">Home</a></li>
      {% for page in pages.children %}
          {% if page.visible %}
          {% set current_page = (page.active or page.activeChild) ? 'current' : '' %}
          <li class="{{ current_page }}">
            <a href="{{ page.url }}">
              {{ page.menu }}
            </a>
          </li>
          {% endif %}
      {% endfor %}
      {% for mitem in site.menu %}
          <li>
            <a href="{{ mitem.link }}">{{ mitem.text }}</a>
          </li>
      {% endfor %}
      {% if site.submenu %}
          <li class="submenu">
            <a href="">Submenu</a>
            <ul>
              {% for submenu in site.submenu %}
                <li><a href="{{ submenu.link }}">{{ submenu.text }}</a></li>
              {% endfor %}
            </ul>
          </li>
      {% endif %}
      {% for button in site.buttons %}
      <li><a href="{{ button.link }}" class="button special">{{ button.text }}</a></li>
      {% endfor %}
    </ul>
  </nav>
</header>

But not sure how submenu works, because I see at the bottom of HTML there’s a duplicate menu DOM. Probably JS generates it :thinking:

3

Thanks a lot, thats working fine!
greetings.

1 Like