Solved

Sticky Announcement Bar - 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 3056

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 145

@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 3056

You can continue adding the code

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

 

Ujjaval
Shopify Partner
1242 197 206

@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 3056

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.