Hamburger menu not working

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">
          {%- for _item in -%}
            {%- 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 -%}
            <li><button class="button button--secondary button--circle search-button js-search-toggle"><i class="fas fa-search"></i></button></li>
          {%- endif -%}

I am 10000% sure that it’s some super obvious stuff.

Can you add some more info?

A screenshot.

A link to whatever tutorial you might have used.

Some plain HTML rendered on your page would be much easier for us to follow than figuring out your complex Liquid.

Can you share a link too? Even if you paste the html and css as a plain html page with no Jekyll, on codepen or github pages. Then we can inspect the elements and css to see what is up.

Yes for sure. You can go check out my current code at GitHub - ScienceToKeepAnIon/ Work in progress...

The hamburger menu and the header are under _includes.

Thanks a lot and do ask me if you need anything else.
The problem is basically that when the page shrinks, the menu pops up but the links do not go inside the menu, but remain outside beside the menu.

Do you even need the hamburger?

My mobile shows all the menu items directly and then Menu button. If you had more options to fit in, then a Menu button makes sense.

The other options are already visible so they can’t become visible. Here with the menu closed.

Also you should right click and inspect element. Then you can see any errors in the JS console and check some DOM elements and CSS.

I see the css is set here. at 1b4d926cc2bbfddf61f0e52fd3620f25232f268e · ScienceToKeepAnIon/ · GitHub

You can adjust the screen width for when the menu become hidden. Use mobile preview button in your browser debugger then you can switch between mobile, tablet, and desktop

1 Like

I was just doing that. Thanks a lot!