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

Store Design
, ,
1

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

2

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

3

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

1 Like
4

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!

1 Like
5

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!

1 Like
6

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

Filip02_0-1733407338840.png
Filip02_0-1733407338840.png457×542 240 KB

7

Don,t work bro

8

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%;
}
1 Like
9

The script works but I can’t save it

Filip02_0-1733589644508.png

10

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