How can I make my announcement bar sticky on the Dawn theme?

Technical Q&A
1

We have set our navigation Header to ‘Sticky Header - On scroll up’ and would like our Announcement Bar to be sticky i.e. visible all the time.

We have tried adding all the codes from similar discussion topics but they don’t work. The bar always disappears and some override our settings and make the Header sticky.

To confirm this is what we are trying to achieve

  1. Annoucement Bar - Sticky

  2. Header - Sticky, on scroll up

https://elegantfurniture.co.nz/

2

@dikerr

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.announcement-bar-section {
    position: sticky;
    top: 0;
    z-index: 20;
}

.section-header {
    position: sticky;
    top: 37px;
    width: 100%;
    z-index: 20;
}

.shopify-section-header-sticky{
    box-shadow:0px 5px 5px rgba(0,0,0,.5);
}
5 Likes
3

@dikerr
add below css into base.css file

div#shopify-section-sections--18314230989090__announcement-bar {
    position: fixed;
    width: 100%;
}
.header-wrapper {
    display: block;
    position: fixed;
    margin-top: 16px;
    width: 100%;
    
}
4

Hi @Dianakerr,

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

#shopify-section-sections--18314230989090__announcement-bar{
position: sticky !important;
    top: 0;
}
.section-header {
    top: 38px !important;
}

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

1 Like
5

This solution works the best as it doesn’t cut off any of the banners but the navigation bar is sticky - Is there a way to keep the Announcement Bart sticky but the Navigation Bar “Sticky, on scroll up”?

6

You can continue adding the code

.shopify-section-header-hidden {
    position: static !important;
}
1 Like
7

Hi, I’m trying to achieve the same thing, but somehow, the code is not working.

Here’s the link to my store

https://fc4bfd.myshopify.com/

Thanks!

8

This works close to what I need to do but when I scroll down, the announcement bar goes away and there is a gap between the header and the top of the screen as if the announcement bar should be there. When I scroll back up, the bar comes back.

2 Likes
9

Hey, this worked for me perfectly! So thanks a lot!

But on the mobile version, there is a slight difference. How to rectify that?