How can I fix (sticky) Announcement bar and Header Dawn theme (on scroll)

[Filip02]

How can I fix (sticky) Announcement bar and Header Dawn theme on scrolling my website

[steve_michael2]

Hi @Filip02  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[DaisyVo]

Hi @Filip02 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.shopify-section-group-header-group.section-header {
    position: fixed !important;
    top: 38.8px;
    z-index: 9999 !important;
    width: 100%;
}
div.shopify-section-group-header-group.announcement-bar-section {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
}

Here is the result: https://prnt.sc/PGxLEDFTBzyx

I hope this helps

Best,

Daisy

[steve_michael2]

Hi @Filip02 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

div#shopify-section-sections--16462901215321__announcement-bar {
    position: sticky !important;
    top: 0;
    z-index: 1000 !important;
    width:100%;
}
div#shopify-section-sections--16462901215321__header {
    position: sticky !important;
    top: 38px;
    z-index: 999 !important;
    width:100%;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Filip02]

Hi thanks for help but this is what pops up when I want to save 

Online Store editor session can't be published

And now is over picture

[steve_michael2]

Hi @Filip02 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

div#shopify-section-sections--16462901215321__announcement-bar {
    position: fixed !important;
    top: 0;
    z-index: 1000 !important;
    width:100%;
}
div#shopify-section-sections--16462901215321__header {
    position: fixed !important;
    top: 38px;
    z-index: 999 !important;
    width:100%;
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[Filip02]

Don,t work bro

[DaisyVo · Accepted solution]

Hi @Filip02 

Have you tried the code I sent you above? 

.shopify-section-group-header-group.section-header {
    position: fixed !important;
    top: 38.8px;
    z-index: 9999 !important;
    width: 100%;
}
div.shopify-section-group-header-group.announcement-bar-section {
    position: fixed !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100%;
}

[Filip02]

The script works but I can't save it

[Filip02]

I fix it just pasted the for AB in AB custom css and coed for Header in header custom css