STICKY Navigation and Header

New Member
22 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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | 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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
667 170 234

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

Venture

0 Likes
Highlighted
Shopify Expert
667 170 234

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

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

0 Likes
Highlighted
New Member
22 0 0

Is there any solution for this?

0 Likes
Highlighted
Shopify Expert
667 170 234
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