See through NAV

Solved
joshsadler98
Pathfinder
114 3 33

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

 

any help would be much appreciated thank you!

Accepted Solution (1)

Accepted Solutions
PaulNewton
Shopify Partner
3499 234 685

This is an accepted solution.

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;
}

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 6 (6)
PaulNewton
Shopify Partner
3499 234 685

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.

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
joshsadler98
Pathfinder
114 3 33

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

joshsadler98_0-1636829935970.png

I'm on chrome right now! Very strange!

joshsadler98
Pathfinder
114 3 33

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?

PaulNewton
Shopify Partner
3499 234 685

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.

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
PaulNewton
Shopify Partner
3499 234 685

This is an accepted solution.

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;
}

 

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

joshsadler98
Pathfinder
114 3 33

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