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
667 170 233

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
22 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
22 0 0

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

0 Likes
Highlighted
Shopify Expert
667 170 233

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
22 0 0

Yes -> latestelite.com

0 Likes
Highlighted
New Member
22 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
22 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