How to make the announcement bar sticky?

Store Design
, , , , , ,
1

Hi, I use the horizon theme. How to make the announcement bar sticky?

Store: 777case.myshopify.com (password: 777)

Thanks!

1 Like
2

Mustafa_Ali_0-1750853506052.png
Mustafa_Ali_0-1750853506052.png1280Ă—582 704 KB

hey @nxjus dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

3

Hi @nxjus ,

Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__row {
    margin-top: 35px !important;
}

.announcement-bar {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1000;
  background-color: black !important;
}

Thanks!

4

Hi, some CSS tweaks in base.css should do the job. Try these changes

.announcement-bar {
position: fixed !important;
top: 0 !important;
left: 0;
right: 0;
width: 100%;
z-index: 9999;
background-color: inherit;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-wrapper, .header, [data-header] {
position: sticky !important;
top: var(–announcement-bar-height, 40px);
z-index: 9998;
}

main, .main-content, .shopify-section {
padding-top: var(–announcement-bar-height, 40px);
}

.announcement-bar__slider {
position: relative;
width: 100%;
}

@media screen and (max-width: 749px) {
.announcement-bar {
position: fixed !important;
top: 0 !important;
z-index: 9999;
}
.header-wrapper, .header, [data-header] {
top: var(–announcement-bar-height, 40px);
}
}