Hamburger Menu show part of menu below

[valokammi]

Describe the issue

Created Hamburger Menu like in preview page. Works as expected but there is extra part of menu showing below hamburger icon in medium screens, not in small screens. See screenshots.
Source codes from preview and test page seems to be ok, added both in attachments.

Environment

Example: OS, versions, browser details.
Windows 10, Laragon (devserver), Modx, Firefox, Brave.

hamburger menu render html.txt

[Yohn]

What version are you using?

I updated the hambuurger nav to work with dropdown menus in v 2.2.5, so if you're using the newest version (2.2.8 currently) it should work as expected.

I've been pushing updates to the npm package weekly, if not multiple times a week recently for bug fixes, and I'll probably be pushing another update by this weekend.

[Yohn]

I was able to replicate it - https://codepen.io/Yohn/pen/mybQPeE

I also started playing with @wwmoraes version of the responsive hamburger menu the other day. I tried with your search box and menu items, and could only get it working with the search on the left side instead of the right side. You can see that one here: https://codepen.io/Yohn/pen/KwPrzBr

[valokammi]

Ok. I updated to latest (2.2.8) and I tested more. As you told it works when search is left side. Then I cleaned top bar and moved search other place on page. (My client want that search is right in top bar.)
When there was menu only, same problem came back! That "ghost" menu disappears when screen is at 720 px wide, at 721 px wide it came visible..

[Yohn]

It has to be something with the overflows on the media breakpoints. I'll look into it again after I bring my dog back inside.

[Yohn]

@valokammi I'll have an update today that'll fix this issue for you.

Also, if you put an empty, just like this: <ul></ul> before the <ul> tag that has your search form in it, it'll push that search box to the right side. I'll be a under the hamburger taggler, but when I push this next update it'll be inline with that 3 line toggler unless the hidden <ul> is open. You'll see soonish.

[Yohn]

This has been updated and corrected in version 2.2.9, and your navbar is in the demo - PicoCSS Demo

[valokammi]

Updated CSS and works like charm! And thank you for your job for this nice little template. Keep rocking!
Tested with search and theme switcher. If theme switcher is added it have a little offset. But this could be bad html by me. And I don't use it at any live site. Trying to keep my template javascript free as possible.
I attach a screenshot and html code (I tried put html into message marked as "code", and it didn't look good) what I used with theme switcher and search "combined".

picocss-hamburger-menu.txt

[valokammi]

Well there is one thing about arrows in menu. They seems collapsed.

[Yohn]

Yeah them arrows got me mad so I did a quick fix by removing the arrows when hide-arrow is added to the details classes to hide the arrows.

<details class="hide-arrow">

[valokammi]

I can live with that workaround.