DIY announcement bar fixed instead of sticky

Hi there I'm wondering if I could please get some help. I have created a DIY announcement bar using a footer section and I want it to be fixed at the top of the screen rather than being sticky/scroll down with the page. 

It's weird because it disappears behind the header and then reappears on the rest of the site.

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

this is the current code I have for the bar:

/*Move footer scroll headline to header */
#footer-sections .page-section:nth-child(1) {
 position: fixed!important;
 top: 0!important;
 z-index:9 9!important;
 width: 100%!important;
 height: auto!important;
}
header,#page{
margin-top: 2rem!important
}

I've tried removing "position: fixed!important;" and trying a few different things but then the bar disappears all together.

Any help is appreciated thank you!! 

First, change fixed to absolute, something like this

#footer-sections .page-section:nth-child(1) {
    position: absolute;
    top: 0 !important;
    z-index: 9999999;
    width: 100% !important;
    height: auto !important;
}

next, remove position relative of footer by adding this CSS code under your code

footer.sections {
    position: static !important;
}

On 4/22/2024 at 8:01 PM, tuanphan said:

First, change fixed to absolute, something like this

next, remove position relative of footer by adding this CSS code under your code

Thank you so much, but now it only appears when I open the pop up menu. Do you know why this might be happening? Ideally I would like the scrolling announcement bar to appear only on the home page and be hidden when the menu opens up.

On 4/24/2024 at 7:16 AM, daniellemusarra said:

Thank you so much, but now it only appears when I open the pop up menu. Do you know why this might be happening? Ideally I would like the scrolling announcement bar to appear only on the home page and be hidden when the menu opens up.

I see it always appears here, you try log out account and check again

To make it appears on Homepage only, you can use this code to Custom CSS box

body:not(.homepage) #footer-sections .page-section:nth-child(1) {
    display: none !important;
    visibility: hidden !important;
}