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

FLIPFLOP1
Tourist
6 0 2

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.

Replies 9 (9)
dmwwebartisan
Shopify Partner
9731 2226 3053

@FLIPFLOP1 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
FLIPFLOP1
Tourist
6 0 2

@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.

 

IMG-9325.PNG

IMG-9324.PNG

 

 

dmwwebartisan
Shopify Partner
9731 2226 3053

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
FLIPFLOP1
Tourist
6 0 2

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

Thank you so much! 

FLIPFLOP1
Tourist
6 0 2

@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. 

unnamed.jpg

dmwwebartisan
Shopify Partner
9731 2226 3053

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
FLIPFLOP1
Tourist
6 0 2

@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
Shopify Partner
9731 2226 3053

@FLIPFLOP1 

Please share screenshot 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
FLIPFLOP1
Tourist
6 0 2

@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. 

 

IMG-9328.PNG

IMG-9327.PNG