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

Store Design
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.

2

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

3

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

4

Hi @dowloadingvirus ,

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

5

Cheers mate site below

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

password: virus

6

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;
}
7

Amazing thank you mate.

1 Like
8

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;
}
9

Hi @dowloadingvirus ,

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

10

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.

11

Hi @dowloadingvirus ,

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

12

Just put it back online mate, thank you

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

password: virus

13

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;
}