Jump to content

Persistent layout shift issue in navbar area with Brine 7.0

Recommended Posts

Hi everyone! I'm currently dealing with a very annoying layout shift issue in my site's navigation area. I use Brine on Squarespace 7.0. I have a split navigation with the logo at the center. You'll see that when you visit the site both sides of the navigation and the logo are stacked on the left side for a split second, then shift to where they are supposed to be. I've taken some screenshots of it in the incorrect position using Lighthouse, attached below.

I've tried troubleshooting some of my custom code by removing it and refreshing it, trying to see if it's an issue I created. As far as I can tell, it's baked in, but I could certainly be wrong. I could really use a second pair of eyes. Thanks in advance!

Screen Shot 2023-05-23 at 10.54.44 PM.png

Screen Shot 2023-05-23 at 10.55.02 PM.png

Edited by spartanwanderer
Link to comment
  • 1 month later...

Hi all, 

I didn't really get an answer the first time I asked this, and in that time I haven't been able to solve it, so here I am again. 

I'm using the Brine 7.0 template with centered branding and the primary menu on the left and the secondary menu on the right. These are options in the site styles and not arranged with any custom code. For whatever reason, when the site loads the menus and logo load on the left then quickly shift into place. If I remove the custom code for my navbar background, the issue still persists. It's also being picked up as a CLS issue when looking at web vitals.

I wish I could find the solution to this since the way it loads makes my site look unprofessional to other people in the design space. Any help is much appreciated!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.