Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Nav moves around while page loads


genehayes

Question

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 post
  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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

Squarespace adds the class "loaded" to the header after it loads. So its not applying your CSS until that class is there.

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.

Posted Images

14 answers to this question

Recommended Posts

  • 0
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 post
  • 0
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. 

Checked on Firefox and Edge here, both are also good.

Link to post
  • 0
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 post
  • 0
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.

Edited by rwp
Link to post

Create an account or sign in to comment

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


×
×
  • Create New...