Problem with flex on navbar

Design help General
1

Hello,

I’m trying to put some flex on a standard navbar but it is not giving me the expected results?

I want the logo on the left and the nav-links on the right.

But when I use:
Display: Flexbox
Direction: Horizontal
Align: Stretch
Justify: Space-between

It won’t go to the sides of the container

here is my share link:
https://preview.webflow.com/preview/navbarflex?utm_medium=preview_link&utm_source=dashboard&utm_content=navbarflex&preview=0ce50b78cc98767a70f82fa059d5428a&mode=preview

2

It is because you’re doing this on a Container element and there’s a bug with Flexbox Space Between and Webflow containers: it does what you’re witnessing.

Simple method to get what you want:

  1. drag a div inside of the container, drag everything that was in the container inside the div, make the div width 100%. Now apply your Flexbox settings to the div and you’ll get what you expect.
  2. I forgot I was making a list of steps, there’s no more steps.
1 Like
3

Thanks for the quick response i already use that work around ;). Was just wondering if it was possible with the default navbar

4

Thanks, this has been really helpful, default nav bar was driving me mad!

5

Hi there,
I think I am having a similar issue, but using the solution above didn’t solve it, so I’m not sure.

In the designer and in preview mode, the burger is right-aligned and my logo is left-aligned (expected behavior). When it is published, and I view the staging site on desktop, but the mobile view using inspect, it still looks good.
But on mobile (iphone 12, safari or chrome), the burger is indented significantly.

Thanks so much, I’m pulling my hair out on this.

https://preview.webflow.com/preview/healia?utm_medium=preview_link&utm_source=designer&utm_content=healia&preview=7d43b75fdc556c6ae190a5eeb13540eb&workflow=preview