Issue with Header changing size on load

[Susan_Caldwell]

Some of the links on the navigation bar on my website cause the header to increase in size and then go back to normal as the page loads. Is there a way I can fix this?

You can see what I mean here:

www.beautycentsmag.com

Click on BeautyCents Mag and you will see that the header shifts slightly as the page loads.
Please advise.

---

Here is my public share link: https://preview.webflow.com/preview/beautycentsmag?preview=06f5d6d9db67c03c63b816b1308470f3
(how to access public share link)

[cyberdave (Dave S.)]

Hi @Susan_Caldwell, thanks for the good question! This styling issue looks like it is being caused due to the Current class on the logo container class does not have the same 15px top margin as the Nav link styling without the current class.

I would either change the logo container class with the “Current” class to have a 15px top margin:

or, I would change the Logo container class without the current class, to have a top margin of 0px:

Learn more about working with the Current class here: States | Webflow University

I hope this helps!

[Susan_Caldwell]

Thank you! This does help.

[Susan_Caldwell]

I am actually still having issues with this. I followed the advice on the screenshots and it seems to work sometimes, but not consistently. I also can’t understand why the header shifts a few pixels to the right whenever “BeautyCents Mag” is selected.

Is there a video/tutorial that includes details about the Current pseudo-class that would help me understand what I’m doing wrong?

Your help is appreciated.

Thanks,
Susan