STICKY Navigation and Header

Highlighted

remove the other code and add this

@media only screen and (max-width: 748px)  {  
header.site-header {
	position: fixed!important;
	z-index: 999!important;
}
#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

Okay I see. So after adding this code:

 

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

 

It almost worked, but there is one thing that happens. There is a white box that pops up now under the header instead of the regular site being there. I highlighted the area in red. 

0 Likes
Highlighted
New Member
19 0 0

This code worked! Thank you! Disregard my last message please.

0 Likes
Highlighted
New Member
19 0 0

Hi, I am trying to use "Quick Announcement Bar by Hextom" and put a BFCM banner at the top of the site, but it doesn't properly push down everything else and covers the site instead. I have the right settings for the app. I believe it's because of the sticky nav bar code in my theme not interacting well with the announcement bar addon. Is there any way to fix this?

0 Likes