STICKY Navigation and Header

[Soco]

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?

[oscprofessional]

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

[oscprofessional]

Hello Soco,

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;
}
}

[OTM]

Hi, @Soco ,

This is Evita from On The Map.

What theme are you using?

Best,
Evita

[Soco]

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.

[Soco]

Venture

[OTM]

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;
 }
}

[Soco]

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

[Soco]

Is there any solution for this?

[OTM]

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;
}
}