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

Technical Q&A
1

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.

2

hI @SethN1

please share your website url

3

uvteeth.com

4

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;

}
.announcement-bar{
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
.site-header{
top: 52px;
}
#PageContainer{
padding-top: 77px;
}

1 Like
5

It worked, thank you!

6

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?

7

Hi @SethN1

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

@media(max-width: 749px){

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

@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.