How to make sticky Header logos/icons position above cart drawer Dawn Theme

Solved

How to make sticky Header logos/icons position above cart drawer Dawn Theme

dowloadingvirus
Tourist
10 0 1

 

Hey  guys wondering how can I implement a sticky header in the Shopify Dawn theme that remains visible above the cart drawer, even when the drawer is open? at the moment the cart drawer pulls out over the header logo, etc.

 

any help appreciated ! Cheers.

Accepted Solution (1)
namphan
Shopify Partner
2692 349 397

This is an accepted solution.

Hi @dowloadingvirus,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.section-header.shopify-section-group-header-group {
    z-index: 1001;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

View solution in original post

Replies 12 (12)

Bundler-Manuel
Astronaut
1106 51 131

Hey there @dowloadingvirus   I recommend that you watch this video https://m.youtube.com/watch?v=yT457Zx-fm0 and I think you’d be able to clear out the issues. Let me know if this works for you

Emmanuel
Please let me know if it works by marking it as a solution!
Bundler - Product Bundles app, a great bundle app for Shopify, with glowing user testimonials and a free plan.
dowloadingvirus
Tourist
10 0 1

Old vid mate, they have full sticky headers now it gets hidden by cart drawer tho 😕

namphan
Shopify Partner
2692 349 397

Hi @dowloadingvirus,

Please send the website link, I will check it for you

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
dowloadingvirus
Tourist
10 0 1

Cheers mate site below

 

https://cc5540-da.myshopify.com/

password: virus

namphan
Shopify Partner
2692 349 397

This is an accepted solution.

Hi @dowloadingvirus,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.section-header.shopify-section-group-header-group {
    z-index: 1001;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
dowloadingvirus
Tourist
10 0 1

Amazing thank you mate. 

dowloadingvirus
Tourist
10 0 1

Hi sorry do you have any idea on how to get the cart drawer remove button to show up over the header now , tried a couple things : 

 

.section-header.shopify-section-group-header-group {
    z-index: 1001;
}

.drawer__close {
  position: absolute;      /* Ensure it's positioned within cart-drawer */
  top: 10px;               /* Adjust as needed */
  right: 10px;             /* Adjust as needed */
  z-index: 1003;           /* Higher than the drawer and header */
  background: black !important;
  color: white !important;
  padding: 10px;
  border: none;
  cursor: pointer;
}

 

namphan
Shopify Partner
2692 349 397

Hi @dowloadingvirus,

I don't understand, which link are you referring to?

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
dowloadingvirus
Tourist
10 0 1

It's the close cart-drawer icon, trying to have that icon go over the header, atm the header blocking it so cant close cart.

 

If you need I can put the website back up.

namphan
Shopify Partner
2692 349 397

Hi @dowloadingvirus,

Yes, please send me the preview link, I will check it

Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com
dowloadingvirus
Tourist
10 0 1

Just put it back online mate, thank you 

 

https://cc5540-da.myshopify.com/

password: virus

namphan
Shopify Partner
2692 349 397

Hi @dowloadingvirus,

The close icon cannot be displayed on the header if the cart drawer is below the header, so you can try with following code:

.cart-drawer__warnings .drawer__close {
    top: 50px;
}
Coffee tips fuels my dedication.
Shopify Development Service
PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com