Solved

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

dikerr
Tourist
8 0 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/

 

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1785 3066

This is an accepted solution.

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

View solution in original post

Replies 7 (7)

infoatcodelab7
Shopify Partner
593 141 146

@dikerr 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Assetbase.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);
}

 

Want to modify or develop new website, Hire us.
If helpful then please Like and Accept Solution .
Email: info@codelab7.com
dikerr
Tourist
8 0 1

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"?

PageFly-Victor
Shopify Partner
7865 1785 3066

You can continue adding the code

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

 

Ujjaval
Shopify Partner
1242 197 209

@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%;
    
}

PageFly-Victor
Shopify Partner
7865 1785 3066

This is an accepted solution.

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

marketlink
New Member
4 0 0

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!

 

AaronMPG
Tourist
11 0 1

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.