Solved

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

SethN1
Excursionist
33 1 4

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. 

Accepted Solution (1)
LuckyNigam
Pathfinder
142 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;

View solution in original post

Replies 7 (7)

LuckyNigam
Pathfinder
142 8 14

hI @SethN1 

please share your website url

SethN1
Excursionist
33 1 4

uvteeth.com

LuckyNigam
Pathfinder
142 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 4

It worked, thank you!

SethN1
Excursionist
33 1 4

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?

LuckyNigam
Pathfinder
142 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;
}
}

 

SethN1
Excursionist
33 1 4

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