Jump to content

Brine: Fixed announcement bar not clickable anymore

Recommended Posts

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!

Link to comment
  • Replies 7
  • Views 790
  • Created
  • Last Reply
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? 

IMG_6426.PNG

@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?

Link to comment

@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. 

image.thumb.png.3aa79f326798965b0c0d36449007c5ec.pngYou can add some top margin to the menu bar to account for the announcement-bar

 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.