Why does my nav logo move on mobile?


When viewing my site on a mobile device, the logo in the nav bar shifts left/right when navigating between the homepage and any other page on the site. It appears that the logo is slightly more left on the homepage than the rest of the site. This doesn’t happen in Preview, only when viewing on a device (iPhone).

I can’t work out why this would happen since the style isn’t different on different pages. Any ideas or solutions are greatly appreciated.

Here is my site Read-Only: LINK

Hi there,

The navbar logo can be configured through the Brand link settings in your navbar. To ensure proper navbar positioning and logo display:

  1. Access your navbar’s Style panel
  2. Under the Layout section, set the Position to Fixed
  3. Select the Top preset position
  4. Add appropriate padding to your body element to prevent content from hiding behind the navbar

For detailed instructions about logo configuration, you can refer to our Brand link documentation.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

@WebsiteMaintenance could you explain your suggestion a little more?

  • what do you mean by a hidden scrollbar? Is this something in the nav itself or somewhere else on the page?
  • How do you implement the body { overflow-y: scroll; ] solution? Is this some custom code or adding a style to something?

Thanks,

Matt

@2X16 That user posts AI SLOP. He does not look at your site.

You are setting the value to 0 for nav_brand.w–current (Current). So the home page gets that class and the others don’t. Webflow defaults that .nav_brand to 10px left padding which you can see if you reset your change. Thus the 10px shift to the right on all the other pages. You would need that to be consistent.

Thanks @webdev . I made that change (setting it to 0 across all breakpoints) but it’s still happening. I’m using an incognito browser window to make sure nothing is being cached.