Why can I see through the top of my navigation bar?

Store Design
1

Hey guys when scrolling for some reason you can see through the top of the nav?

I’ve tried my best to highlight it by pointing to it and circling it. please try for yourself to see what i mean. www.directcomputers.co.uk

joshsadler98_0-1636821443297.png
joshsadler98_0-1636821443297.png1920×940 296 KB

any help would be much appreciated thank you!

2

This appears fine on the homepage in chrome browser( on windows10).

Is this line only after the menu collapses as well or is from the moment the sticky header begins sticking?

Try disabling the announcement bar , or the utility bar under it, and checking again, if adding custom content validate that is valid html.

If still present clear caches and try other browsing modes or browsers.

3

It happens when it collapses down to the bit where it displays the following:

joshsadler98_0-1636829935970.png
joshsadler98_0-1636829935970.png1920×617 225 KB

I’m on chrome right now! Very strange!

4

Hey Paul i found removing my announcement bar fixed the issue, although the announcement bar is quite important for us do you know if theres something i can do to keep it but stop the issue happening?

5

Make sure the announcement content is valid html or simply plain text.

Either way I’m unable to replicate the conditions so no idea what the issue is beyond trying to clear the cache, or some specific issue with your OS+browser combination and or browser extensions.

Try making a copy of the theme and check that, if a copy works fine that may point to cookies or an app issue.

Then validating the website https://validator.w3.org/check and removing the bigger issues.

6

Oh one fix may just be to put a negative positions on margin and top of the the header , or it’s internal elements

.site-header-sticky--scrolled {
    margin-top: -1px;
    top: -1px;
}
7

That fixed it! Amazing thanks paul and i learned a think or two as well! Top stuff.