STICKY Navigation and Header

Highlighted

Adding the fixed position to the parent of the class suggested above appears to make it work.

 

Code would be:

@media only screen and (max-width: 748px)  {  
header.site-header {
	position: fixed;
	z-index: 999;
}
#MainContent {
	margin-top: 92px;
}
}

 

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
0 Likes
Highlighted
Shopify Expert
665 170 202

Yes, but he has no background color for the header. that's why it didn't work.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
19 0 0

This code didn't fully work either. The same problem again - The header is sticky, but the "x" that is normally there on the side to exit the menu when it pops out is still not visible.

0 Likes
Highlighted
New Member
19 0 0

And yeah, there is also still no background color when the menu pops out still...

0 Likes
Highlighted
Shopify Expert
665 170 202

Can you please share your store URL, because in demo theme everything works fine.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Highlighted
New Member
19 0 0

Yes -> latestelite.com

0 Likes
Highlighted
New Member
19 0 0

It's Venture theme, Snowboards style

0 Likes
Highlighted

The background is on the parent that's why it's transparent when you make the children fixed.


did you try adding the fixed position to the parent class? Works on demo and your website.

@media only screen and (max-width: 748px)  {  
header.site-header {
	position: fixed;
	z-index: 999;
}
#MainContent {
	margin-top: 92px;
}
}
We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
0 Likes
Highlighted
New Member
19 0 0

Oh okay, sorry my fault, I was confused.

 

I was adding that code to the bottom of my theme.scss.liquid. What is the parent class and where should I put this code?

0 Likes
Highlighted

the parent class is "header.site-header"

Copying my above code and putting it in the theme.scss.liquid is correct.

We work on Shopify stores to improve, maintain, and build functionality across all store types.
- Reach Out To Us! | hello@storemedics.com
- Visit Our Site! | https://www.storemedics.com

If we helped, leave a Like / Accept Solution
0 Likes