NavBar has no height and Elements overlap

Design help General
1

Dear Webflow Users

I’m having an issue with my Navbar in combination with the Hamburger Menu.
I created the NavBar in the Desktop View with the following Hierarchy:
Nav Element → Section → 3 div Elements (1. Nav Buttons on the Left, 2. Logo in the middle, 3. Nav Buttons on the right)
The Nav Element end Section are both Flex Elements that flow from left to right. Each div is a Flexbox with left to right and an Alignment of left, middle and right for the respective Contents.

As soon as the breakpoint activates the display of the (closed) Hamburger Menu, things get weird. The Nav Element has no height anymore and the div elements are not behaving according to the flex settings but randomly stack and overlap. Same happens when opening the menu. the buttons from the left overlap the buttons from the right and the logo and hamburger menu disappear behind it.

I have googled and tried everything but can’t seem to fix the issue. Any suggestion is highly appreciated!

All the Best

Here is my site Read-Only: https://preview.webflow.com/preview/public-private-jesus?utm_medium=preview_link&utm_source=designer&utm_content=public-private-jesus&preview=18d67325da6a947176ab6f9e58d97f0e&workflow=preview

2

I’d like to clarify if you wanted to keep those left and right buttons in different breakpoints? If you could also please specify what specific breakpoints you encountered an issue, it would be helpful.

3

Sure thing. In the full size Menu, three buttons should be on the left and two on the right with the logo in the Middle. Every Breakpoint after pc (iPad, smartphone landscape & smartphone upright) has a hamburger menu. As soon as the Hamburger menu gets displayed, the nav bar gets a (visual) hight of 0 while the container with all the nav stuff in it still preserves its hight. let me know if I can provide any more informations.

4

Hi Simon,

I just checked on the read-only site and it seems like this issue has now been fixed? I can see the burger menu for smaller breakpoints (tablet, mobile landscape and mobile portrait) displayed and the nav bar is not visible. Kindly confirm if this is fixed, thanks!

image (11)
image (11)772×749 249 KB

5

I fixed it by simply using a preset Navbar. My custom Navbar was not working even after several additional attempts.