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

13 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;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

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? 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
7 minutes ago, ali.duffell said:

Thanks @tuanphan here is the site - https://www.helena-arguelles.com/ code works except on mobiles

Add this code to Design > Custom CSS

.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    top: 110px;
}

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0
9 hours ago, tuanphan said:

You want

annoucement bar

header bottom

header top

is this right?

Hello, 

 

Yes, I believe so. I attached a photo of how I would like it, if that helps. 

Screen Shot 2020-05-03 at 9.41.39 AM.png

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