Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: See through NAV

Solved

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

Not applicable

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)
PaulNewton
Shopify Partner
7450 657 1565

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

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


View solution in original post

Replies 6 (6)

PaulNewton
Shopify Partner
7450 657 1565

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.

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


Not applicable

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!

Not applicable

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
7450 657 1565

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.

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


PaulNewton
Shopify Partner
7450 657 1565

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

 

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


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

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


Not applicable

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