Incorrect Navbar Styling

Design help General
1

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

Expected
Expected1920×1200 132 KB

Actual Website - Navbar Looks Wrong

On-the-Horizon Dashboard
On-the-Horizon Dashboard1920×1200 124 KB

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).
    Home
    Home1920×1200 97.5 KB
  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

2

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:.