Nav moves around while page loads

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?
 

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

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

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

Can you post a screen shot?

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

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

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.

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.

2 minutes ago, rwp said:

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

Interesting, it's now only happening on Chrome. I wonder what could be causing it...

Oh, I just saw it.

Try updating your selectors to this

.site-header.loaded div#secondaryNavWrapper .nav-item:last-child a {

Wow, you know what, that might have fixed it! What does that do? I'm still learning CSS haha
Also, any ideas how to fix the nav getting taller?

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

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

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.