Fixed nav has stopped working

Hey!

We have a fixed navigation bar on our website (site read-only link), but a few days ago it stopped working and I can’t figure out why.

I would like the navigation bar to stay fixed at the top of the body element and have the page content scroll under it.

Thank you!

Hi there,

A fixed navbar that stays at the top while users scroll is a common design pattern that improves navigation. Here’s how to set it up:

  1. Select your navbar element and in the Layout section of the Styles panel, set the Position to Fixed
  2. Choose the Top preset position
  3. Select the body element and add top padding to prevent the navbar from overlapping content
  4. Add a high z-index value (e.g., 2147483647) to ensure the navbar stays above other elements

For best results, make sure your navbar is a direct child of the body element and verify that no parent elements have overflow set to hidden, scroll, or auto, as these settings can interfere with fixed positioning.

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

Thank you for the above. I’ve checked the nav settings and double-checked the above is in place, but the nav still isn’t working the way it used to.

It works perfectly in designer view but when I publish the site, the top and bottom padding is missing, and the nav isn’t fixed :frowning:

Does anyone know what else could be causing the problem?

Share a link to the published website let me inspect and check where the issue might be coming from.

Hey @KMiller,

Do you have any table styling rules on the custom code Head section of the site under such comment:

<!-- Start Table Style -->

If yes, could you make sure you also have the closing </style> tag after those styling rules?

Once you add the closing tag, save and publish the site and test if the navbar works fine on the published site.

Hey @AJ_Dev,

Thank you, thank you, thank you!

It worked. I can’t believe I didn’t see that :)

1 Like