STICKY Navigation and Header

Highlighted
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
Highlighted

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

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
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
667 170 203

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

Venture

0 Likes
Highlighted
Shopify Expert
667 170 203

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
Highlighted
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
Highlighted
Shopify Expert
667 170 203
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