Sup again guys!
I’m using the following code to make a hamburger menu on my site. It shows but the items in my header stay outside the menu and don’t move into the menu when the page gets small enough.
<a id="togglemenu" onclick="document.body.classList.toggle('menuopen');">Menu<span><span></span><span></span><span></span></span></a>
And then I have some styling for it.
My header is built using the following for loop:
<nav class="navigation">
<ul>
{%- for _item in site.data.navigation.header -%}
{%- include snippets/get-nav-url.html path=_item.url -%}
{%- assign _nav_url = __return -%}
{%- include snippets/get-nav-url.html path=page.url -%}
{%- assign _page_url = __return -%}
{%- include snippets/get-string-from-locale-config.html locale=_item.titles -%}
{%- if _nav_url == _page_url or page.nav_key and _item.key and page.nav_key == _item.key -%}
<li class="navigation__item navigation__item--active"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
{%- else -%}
<li class="navigation__item"><a href="{{ _nav_url }}">{%- if _item.title -%}{{ _item.title }}{%- else -%}{{ __return }}{%- endif -%}</a></li>
{%- endif -%}
{%- endfor -%}
{%- include hamburger-menu.html -%}
{%- if site.search.provider -%}
<li><button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button></li>
{%- endif -%}
</ul>
</nav>
I am 10000% sure that it’s some super obvious stuff.
