Streaming live at 10am (PST)

Website layout shifts when I load a new page


#1

Hi,

My webflow site’s layout keeps shifting each time I load a new page via the nav. (I’m using Google Chrome).

Please see the screencast I recorded: http://recordit.co/dTWi2J1mBo

How can I get rid of this demon on my site? :frowning:


Here is my public share link: https://preview.webflow.com/preview/tslproject?preview=49c3722920115dace7a664f9a6baf5d0
(how to access public share link)


#2

Hi @ronalessi,

I’m happy to take a look for you!

It looks like your public share link didn’t come through – would you be able to include or update your link, and I’ll help you troubleshoot this behavior?

Thanks!


#3

Hi @Andrew!!!

I added the public share link now.

Please slay this demon on my site.


#4

I’m on it!

*sharpens Demon-slaying sword.

I was able to reproduce this effect (to a lesser degree) when I loaded the site! It looks like you are using the Montserrat font from Google, and it takes a moment to load from their servers. Before the font loads, the links are displaying in your Body font, which causes the longer Nav Links to shift down to their own row.

My first suggestion would be to reduce the margin/padding of the items in your Navbar. See if this works first. It should prevent it from the drastic shift down, but you may still notice the font change. I’m not sure if you noticed, but the font delay is also affecting your body content.

To fix this, I would highly recommend downloading the Montserrat Google Font and uploading it to Webflow with these instructions.This should speed up the font loading, and hopefully eliminate the effect for text around your site.


#5

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