digital theme make announcement bar sticky

[urbantis]

How can I make the accnouncement bar sticky? Just announcement bar, not the whole header:

https://eatexcellence.com/

Thanks

[Small_Task_Help]

Hi,

Hope this will help

- At css file add below css

CSS example

.announcement-bar {
  position: sticky;
  top: 0;
  z-index: 9999;
}

[jordancarey · Accepted solution]

Hey there, this site's looking great! I took a quick look at the theme you're using, and it looks like making the announcement bar on the Digital theme sticky is going to need some custom CSS. You can put it in the custom CSS section at the bottom of the announcement bar settings:

.announcement-bar {
  position: fixed;
  width: 100%;
}

I recorded a quick video of where to find the custom CSS setting and how the code works just in case you or anyone else would find it helpful:

Let me know if you need help with anything else!

[urbantis]

Thanks, this one worked

[Darshan17]

Hi Urbantis, 

It looks like overlapping issue, please use my css to fix this. 

Thanks! 

[Darshan17]

Announcement bar sticky without overlapping the header

Follow these steps to apply the fix via the Shopify admin panel:

1. Go to your Shopify Admin → Click on Online Store → Themes → Click Actions → Edit Code

2. Under Assets, find and open the file named base.css. 

3. Search for this class:

   .shopify-section-header

   ➤ Remove the line that says:

   z-index: 12;

   This helps prevent layering issues when fixing the announcement bar.

4. Now search for .announcement-bar in the same CSS file.
   ➤ Add the following CSS properties to make it fixed at the top:

   position: fixed;
   width: 100%;
   top: 0;

This will fix the announcement bar at the top of the page without overlapping the header.