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

Fixed Header with Announcement Bar


Chrispy

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;
  }
}
Link to post
  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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%; t

Can you share link to your site? 

Posted Images

18 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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

Hello,

Hope you're well during COVID-19. 😀

I was wondering if you could help me out.

I have a custom CSS code fixed header but it only has space in the navigation menu on the main page. On other pages the main navigation doesn't have extra space.

I attached a image for you to see.

Really. hope you can help me out.

Best

header.jpg

Link to post
  • 0

Hello,

So happy to have found this topic. I've have basically zero experience with CSS, but have thankfully been able to piece together these codes with success. I do have a question with the announcement bar positioning as I have it positioned under the header. Is there a way to have the announcement bar remain "connected" to the header as its height is variable? Currently its fixed and either gets covered of leaves a gap. 

https://www.grandpad.biz/

Edited by Mark5n7
Link to post
  • 0
On 8/31/2020 at 9:47 AM, nicholasvaldo said:

Hello,

Hope you're well during COVID-19. 😀

I was wondering if you could help me out.

I have a custom CSS code fixed header but it only has space in the navigation menu on the main page. On other pages the main navigation doesn't have extra space.

I attached a image for you to see.

Really. hope you can help me out.

Best

Can you share site url? We can help easier.

7 hours ago, Mark5n7 said:

Hello,

So happy to have found this topic. I've have basically zero experience with CSS, but have thankfully been able to piece together these codes with success. I do have a question with the announcement bar positioning as I have it positioned under the header. Is there a way to have the announcement bar remain "connected" to the header as its height is variable? Currently its fixed and either gets covered of leaves a gap. 

https://www.grandpad.biz/

Doesnt really understand the question... Can you describe in detail & screenshot?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0

Would to have the Announcement Bar (Orange area) to anchor to the Header bottom and move with it as well as push the Intro section down to not cover it.

Hope that helps, thanks.

Screen Shot 2020-09-09 at 6.10.14 PM.png

Screen Shot 2020-09-09 at 6.12.02 PM.png

Edited by Mark5n7
Link to post
  • 0
On 9/10/2020 at 8:15 AM, Mark5n7 said:

Would to have the Announcement Bar (Orange area) to anchor to the Header bottom and move with it as well as push the Intro section down to not cover it.

Hope that helps, thanks.

Can you enable Announcement bar? I don't see it here

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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