Navbar flexbox behavior - Preview not matching published

Design help General
1

Hi there,

I’m having some issues with the navbar of my site. On tablet and Mobile, I would like the burger to be right-aligned and the logo to be left-aligned - fairly typical behavior.

I am achieving this when designing, and this is expressed in the preview, (it is also working fine when the site is published and I use the mobile view in the device toolbar) but when I publish and look at the site on a real mobile (safari or chrome), the burger is nearer centre than right aligned.

I have tried replacing containers with divs (as per other support articles), removing animations etc. It’s tough to debug when I need to publish each change.

I’m really stuck. Thanks all.

In Preview mode
image

Published

Published_Navbar
Published_Navbar1170×618 26.7 KB

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

2

Inside navbar logo left set the div block 20 to width 100%

surely?

3

Hey Wolfie,
Thanks so much for taking a look. You’re totally right - that’s what I thought would work, but it doesn’t when published. I’ve now set div block 20 to width 100%. Behavior is as expected in designer and preview, but not when you load healia.webflow.io on your mobile :frowning:
If you’ve any other ideas, I’d be very grateful.