Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Chrispy

Fixed Header with Announcement Bar

Question

Site URL: https://authenticlifechurch.com/

Question. I had a fixed on scroll header, but when I added the announcement bar it got messed up. As you scrolled a gap remained above my header where the announcement bar was. If you clicked out of the announcement bar it popped back up to the top but I'm not confident people are going to know they have to do that. Is there anyway that as you scroll the header could cover up the announcement bar and then stay fixed? I took my fixed header code out so I could have the announcement bar but this is what I had in the custom CSS:

.Header {
  position: fixed!important;
  z-index: 1000;
  width: 100%;
}

@media screen and (min-width: 641px) {
  .Index section:first-child:not(.Index-gallery), .Main--page, .Intro, .Main {
    padding-top: 81px;
  }
  .Intro + .Main {
    padding-top: 0px;
  }
}

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

You can fixed annoucement bar & disable "close annoucement bar" by adding this code to Home > design > Custom CSS

.Header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 60px;
}
.sqs-announcement-bar-dropzone {
    top: 0;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
span.sqs-announcement-bar-close {
    display: none;
}

 


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


Link to post
  • 0
4 hours ago, ali.duffell said:

Works perfectly - but not on mobiles as it covers the logo/site title etc... any work arounds? Thank you.

Can you share link to your site? 


COVID-19: Free priority support for all users (29/03 - 30/04).

You can tag me (@tuanphan) or send to my email.

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...