Brine: Fixed announcement bar not clickable anymore

Site URL: https://chihuahua-mayflower-6zj5.squarespace.com/

 Hi,

I made my announcement bar fixed with my header, however now I'm unable to click through to the page that's linked to the announcement bar. Would appreciate any help/advice!

The code I'm using right now:

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: rgba(255,255,255,0)!important;
}

@media screen and (min-width: 641px) {
  .Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
    padding-top: 35px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}

PW is: rsp123

Thanks!

Edit z-index:999; to

Quote

z-index: 10000;

8 hours ago, tuanphan said:

Edit z-index:999; to

 

Worked perfectly thank you so much!

@tuanphan Would you also happen to know how to avoid the announcement bar overlapping the logo & menu on mobile? 

See fine here. Did you solve?

Yes, I just removed it's fixed position and it solved the issue - thanks!

On 8/12/2020 at 9:06 AM, jilliansun said:

@tuanphan Would you also happen to know how to avoid the announcement bar overlapping the logo & menu on mobile? 

@tuanphan sorry I changed it back to fixed again, and the issue is the same. How do we remove the overlap of announcement bar on the logo for mobile, and also how do you hide the announcement bar when you click on the hamburger menu?

@jilliansun, there's a couple issues with using position fixed. 

Using position:fixed will take elements out of the flow, so it's height will no longer effect elements. This is why it no longer "pushes down" and instead just covers the menu. 

You can add some top margin to the menu bar to account for the announcement-bar