STICKY Navigation and Header

New Member
19 0 0

Hello, I am looking for the proper code to make my header navigation bar on my site's theme sticky for mobile. What would the code for this be and where do you place it?

0 Likes

Hello ,
Please share yourn site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes

Hello 

Add this css at bottom of
Online Store-> Themes -> Edit code->Assets->theme.scss.liquid

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

  

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Shopify Expert
656 162 195

Hi, @Soco ,

This is Evita from On The Map.

 

What theme are you using?

 

Best,
Evita

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
New Member
19 0 0

Hi, that kind of worked, but now the "x" to exit out of the menu when you hit the hamburger lines to see the selection menu is gone.

0 Likes
New Member
19 0 0

Venture

0 Likes
Highlighted
Shopify Expert
656 162 195

Add this code:

 

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

 

 

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
New Member
19 0 0

That didn't work. It actually made it worse and made the bar transparent, and still no "x" exit button :/

0 Likes
New Member
19 0 0

Is there any solution for this?

0 Likes
Shopify Expert
656 162 195
Just add background color for the navigation.
@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;
}
}
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