Streaming live at 10am (PST)

Incorrect Navbar Styling

Hello,

Background
I created my Webflow website (read-only Designer link) about a week ago, and up until yesterday, the Navbar was rendering just fine across all my pages and adjusting responsively to the size of the browser. Unfortunately, the Navbar is no longer working as expected.

The Problem
On several of my website’s pages, including On-the-Horizon Dashboard, the styling of the Navbar is wrong and doesn’t match what I have in Webflow designer.

Webflow Designer Preview - Navbar Looks Fine

Actual Website - Navbar Looks Wrong

Also, in the Webflow designer, I have configured the breakpoints such that for smaller screen sizes, the Navbar links disappear and are replaced by the hamburger icon. This functionality no longer seems to work on my webpages.

Some Notes

  1. I have the Navbar configured as a symbol, and so my understanding is that it should render the same way on all of the pages in which I have placed this symbol. Up until yesterday, the Navbar rendered properly on all pages. Unfortunately, this is no longer the case. The only page that the Navbar seems to render correctly on is Home (see image below).
  2. The issue occurs for me in both Safari and Chrome, and I’ve reproduced the problem on two separate computers.
  3. The Navbar renders just fine on all of my pages in Preview mode. It’s only when I publish and view the actual website in a browser that the problem occurs.

Thank you for any help you can provide,

Jason

Thanks to Rachel’s help from the Webflow support team, I solved the problem by adding a class called “Body” to the body element on all of my pages. I am still unclear, though, why this worked :sweat_smile:.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.