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 10 (10)

dmwwebartisan
Shopify Partner
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12292 2548 3698

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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

  

edgknows
New Member
12 0 0

Hi mate,

 

I am having a similar issue with my website using Debut Theme.

 

I'm trying to fix the Header in place however on scroll it moves down the page.

 

See screenshots for reference.IMG_7837.PNGIMG_7838.PNG

 

Cheers mate!