Nav Menu Mobile Overflow Cutoff Issue

[stunami (Stu Smith)]

I’m using the Webflow Nav component. I have this issue where the dropdown menu is getting cutoff. Looking at the published source and see there is an overlay class set to overflow hidden that is causing the issue. Once I changed it in Chrome Dev CSS, it appeared. I am using an absolute pos element on a section below the header but I set the menu to z-index 9999 thinking that is the issue. I hid my hero section with the absolute pos and the problem still persists.

See Attachment

Share Link

https://preview.webflow.com/preview/marchingbandsystem?utm_medium=preview_link&utm_source=designer&utm_content=marchingbandsystem&preview=2167bc6cdcf418fc47814e6cf7aef61c&workflow=preview

Any help resolving this is much appreciated!

---

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

[zafremedia]

Hi

the problem is from your container
give max-width : 940px in desktop
put a horizontal flex in it
and put all headrer elements into that flex box

[stunami (Stu Smith)]

Thanks for responding but the subnav dropdown is an absolute positioned element. The container only controls the hamburger menu button. When i set that it only effects the button.

[stunami (Stu Smith)]

This is what it looks like in Designer but in publish it looks like my original post. So its hard to troubleshoot when designer is not displaying reality.

[Stan (justAnotherDeveloper)]

hi @stunami have looked on it before and there is overflow: hidden pre-set with WF as you have set overflow: visible on affected element. To overwrite WF setting you will need one line of custom CSS but … I didn’t checked all your setup if there is possibility to avoid custom code that will be better as this behaviour is not normal.

custom code in project setting.

<style>
.w-nav-overlay{
  overflow: visible;
}
</style>

[stunami (Stu Smith)]

K ill do the workaround. But wonder what caused the default navbar component to break?