Jump to content

Nav moves around while page loads

Recommended Posts

Site URL: https://genehayesdesign.com

I have the York template and the following custom CSS so I can get the Contact link in the nav to look like a button:

div#secondaryNavWrapper .nav-item:last-child a {
    background: #000;
    color: #fff;
    padding: 5px 11px;
    border-radius: 50px;
    border: 2px solid #000;
}


div#secondaryNavWrapper .nav-item:last-child a:hover {
      transition: .1s;
    background: #effc8c;
    color: #000;
}

It seems that it's the a:hover that causes the nav to move around while the page loads, because it doesn't when I remove it. Any ideas?
 

Link to comment
  • Replies 14
  • Views 616
  • Created
  • Last Reply
3 hours ago, rwp said:

What do you mean by moves around. I don't see it when the page loads.

 

2 hours ago, derricksrandomviews said:

I don't see any adverse movement either, desktop or mobile. 

It's only on the desktop version. The navigation (most noticeably, the black button around "contact" will be centered on the page briefly before moving to the right. It only happens on the first load due to Ajax...

Link to comment
Just now, derricksrandomviews said:

Maybe it depends on the browser. I refreshed it many times using Chrome and see no movement or change at all. 

 

2 minutes ago, rwp said:

Can you post a screen shot?

The only movement I see is the entire nav bar getting taller as the site logo loads.

It's pretty quick but I managed to take this screenshot. I was also wondering what might be causing the nav bar getting taller... though I just tried it in Safari and it didn't appear? Hm..... I've had a few others try this and say they also see it though.

Screen Shot 2020-07-30 at 2.36.27 PM.png

Link to comment
8 minutes ago, genehayes said:

Thank you so much! I'll see if I can figure out the nav getting tall.

Squarespaces code does it based on the size of the logo image. It also sets the padding of the first section based on that.

There isn't a way to fix it, that I have found, anyway.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.