How to create a sticky header menu on mobile? Debut Theme

[FLIPFLOP1]

Hi 

I would like to create a sticky/fixed navigation menu on the mobile version of my site. I'm using the debut theme.

I've browsed through a lot of threads without any luck to solve this issue. 

Thank you.

[dmwwebartisan]

@FLIPFLOP1 

Please share your store URL & screenshot what do you want!

Thanks!

[FLIPFLOP1]

@dmwwebartisan my shop is: www.flaph.dk password: twayzi

When I scroll down on my mobile I want the header/navigation menu to be fixed/sticky, so that I shows all the time - this goes for all pages. 

Hope this makes sense - otherwise please get back to me. 🙂

[dmwwebartisan]

@FLIPFLOP1 

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.css-->paste below code at the bottom of the file.

.site-header {
    position: fixed !important;
    background-color: var(--color-body);
    width: 100% !important;
    z-index: 100;
}

Thanks!

[FLIPFLOP1]

Fantastic buddy! I've searched for days on/off trying to solve this issue.

Thank you so much! 

[FLIPFLOP1]

@dmwwebartisan 

Oh I was a bit too fast.

When I look closer the header is now on top of the pictures and not moving up all the way. See enclosed picture. 

 

[dmwwebartisan]

@FLIPFLOP1 

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/theme.css-->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
    #MainContent{margin-top: 3rem!important}
}
@media only screen and (min-width: 750px){
   #MainContent{margin-top: 5rem!important}
}

Thanks!

[FLIPFLOP1]

@dmwwebartisan this almost did the trick. It still cuts off a microscopic piece of the picture. Anyway to fix this?

Otherwise this would still be a totally acceptable solution.

Cheers.

[dmwwebartisan]

@FLIPFLOP1 

Please share screenshot 

[FLIPFLOP1]

@dmwwebartisan Pictures enclosed - the difference is, as I said, reeeeeally small.

I just discovered that the header is also sticky in laptop mode etc. The changes should ONLY affect the mobile view.