Help: How to make only the announcement bar sticky - without header overlap (Debut theme)

Solved
SethN1
Excursionist
33 1 3

Hi, I have been searching for guides on how to make just the announcement bar sticky, however, I have not been able to find a solution that does not overlap the header. Right now, I am using the following code, however, both the announcement bar and the header are sticky:

#shopify-section-header {
position: fixed;
z-index: 9;
width: 100%;
}

#PageContainer {
padding-top: 120px;
}

I also tried this code, however, it overlaps the header: 

.announcement-bar{
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}

How could I make just the announcement bar sticky, without disturbing the header. I'm guessing this would be done by having the announcement bar go behind the header when scrolling, without disturbing it. Thank you so much. 

0 Likes
LuckyNigam
Pathfinder
79 8 14

hI @SethN1 

please share your website url

0 Likes
SethN1
Excursionist
33 1 3

uvteeth.com

0 Likes
LuckyNigam
Pathfinder
79 8 14

This is an accepted solution.

Hi @SethN1 

Paste these css at the bottom of your theme.css file. please like and accept solution if its work for you.

#shopify-section-header {
position: relative !important;
SethN1
Excursionist
33 1 3

It worked, thank you!

0 Likes
SethN1
Excursionist
33 1 3

Hi, thank you for your help and I just noticed a problem. On mobile, when you use the menu, the bottom of it gets cut off. How could I fix this?

0 Likes
LuckyNigam
Pathfinder
79 8 14

Hi @SethN1 

Please copy and paste these css at the bottom of your css file.

@media(max-width: 749px){

#PageContainer {
  padding-top: 120px;
}
}

 

0 Likes
SethN1
Excursionist
33 1 3

@LuckyNigam 

That fixed the visual problem, however, for some reason, the bottom button in the menu is not clickable, even when you go into the learn category, the button on the bottom of the list becomes unclickable. 

0 Likes