FROM CACHE - en_header

Sticky/Fixed Header and Navigation for Minimal Theme

simplyleafy
New Member
2 0 0

Hello, just started my online shop, Simply Leafy.

Does anyone know how to get the header, with logo, cart, sign in, top menu links etc. to be fixed with the Minimal theme? I really like this theme but would like a fixed sticky header as well.  

Thanks,

Jason

Replies 13 (13)
PremierStores
Shopify Partner
279 27 51

Hi @simplyleafy,
You can use these CSS styles to make that changes

.header-bar {
    position: fixed;
    z-index: 999;
    width: 100%;
}
header.site-header {
    padding-top: 60px;
}

On your theme go to Edit code, then at the sidebar go to Assets -> theme.scss.liquid
and paste the code at the end of the file.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
simplyleafy
New Member
2 0 0

Thanks!  Looks awesome!

navoms
New Member
6 0 0

I tried the code by copy pasting it at the end of theme.scss.liquid it but its not working for my simple theme. Any thoughts?

PremierStores
Shopify Partner
279 27 51

Hi, @navoms:

Simple theme requires different styles, this is how it should look:
header.jpg

The sticky will include your logo, we can make a better header but we will need to edit some liquid code.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
rosezy
New Member
1 0 0

hello,

tried this fix. but for some reason only the announcement bar search and cart has fixed position. but logo and menu and line below still scroll.

any ideas? could be and update on the theme.

frankw83
Excursionist
19 0 3

would also interest me

Jatz
Tourist
7 0 4

 

Same problem for me...  Just the announcement bar sticks and the rest of the header doesn't stick.  Any ideas would be much appreciated.

 

NuuMansa
New Member
2 0 0

Also needing assistance.  Currently trying to include my logo and navigation into the sticky header. Succeeded in making the header sticky but I can't yet add the navigation and logo.

Charlotte14
New Member
2 0 0

Same issue - any help much appreciated

FORTLondon
Excursionist
20 1 10

Hello! This code works perfectly for Minimal theme in desktop, but in Mobile it overlays over my Header Logo. Is there any way to prevent this? I used the code exactly as you wrote it.

 

IMG_2541.PNG

 

Thanks,

 

FORTLondon
Excursionist
20 1 10

Can anyone help on the mobile issue?

Thanks!

Carleimarie
New Member
1 0 0

Hi there,

 

I believe you can adjust the number in the code for padding-top: 60px;

 

I changed mine to padding-top: 100px; and it fixed the issue - you could play around by increasing the number and see how much higher you can go so it's not being covered.

Kinjaldavra
Shopify Partner
2302 569 1407

hello @FORTLondon 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width:749px){
.site-header {
    padding-top: 100px !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
Build your professional store with GemPage Page Builder