Empire Theme - Sticky Announcement Bar

[ProceptMarketin]

Cannot make the announcement bar sticky. Any solutions? 

[topnewyork · Accepted solution]

Hi @ProceptMarketin , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.announcement-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
}

.site-header-sticky .site-header {
    top: 47px !important;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[ProceptMarketin]

This worked perfectly. Thank you!! 

[ProceptMarketin]

https://coastalpumps.com/products/2024-10x8-trailer-mounted-pump-package

If you see here, i'm having some issues with this code we implemented causing overlay on the page. The title is cut off

[BSSCommerce-B2B]

@ProceptMarketin ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
 .announcement-bar {
     position: fixed!important;
     width: 100%;
     top: 0;
 }
 header {
   top: 48px!important;
   margin-top: 48px!important;
 }
</style>

result:

If it helps you, please like and mark it as the solution.

Best Regards 😍

[BSSCommerce-HDL]

Hi @ProceptMarketin, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.announcement-bar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
}

.site-header-sticky .site-header {
    top: 48px !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍