Brooklyn sticky announcement bar

Highlighted
Excursionist
37 0 10

Hey SC, 

Im hoping to create a sticky announcement bar for the Brooklyn theme. 

Anyone have any insights? 

Thanks in advance,
Tracy

0 Likes
Highlighted
Shopify Partner
3247 714 862

@trasiewho 

Please select this option from your customizer. This will make your header and announcement bar sticky.

transparent-header.jpg

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Excursionist
37 0 10

Hi @dmwwebartisan 

Thank you for your response. I am actually hoping to only make the announcement bar sticky. Is that an option? 

Thanks,
Tracy

Highlighted
Shopify Partner
3247 714 862

@trasiewho 

Yes, I need to change coding for that. I will check and get back to you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Excursionist
37 0 10

Thank you! 

Tracy

0 Likes
Highlighted
Shopify Partner
3247 714 862

@trasiewho 

Please add the following code in your assets/theme.scss.liquid file.

.announcement-bar {position: fixed !important;}
.site-header {padding: 50px 0 !important;}

 

Hope this helps.

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
Highlighted
Excursionist
37 0 10

Hello @dmwwebartisan !

 

Thank you for your help, it is indeed stick now, but it isn't spanning across the whole page on my laptop. It's perfect on mobile however. 

 

0 Likes
Highlighted
Excursionist
37 0 10

@dmwwebartisan 

Please see screenshot:

Screen Shot 2020-11-01 at 11.09.19 PM.png

0 Likes
Highlighted
Shopify Partner
3247 714 862

@trasiewho 

Please share your website URL. I tried with default brooklyn theme. If you give your URL then I can check exact the issue.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
3247 714 862

@trasiewho 

Add this code:

.announcement-bar {
width:100% !important;
}

Thanks! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan