Fixed Header with Announcement Bar

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

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

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

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? 

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

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

Thanks @tuanphan that worked perfectly! Much appreciated x

@tuanphan when I paste onto my website my header and navigation are on top of each other

please help

18 minutes ago, nicholasvaldo said:

@tuanphan when I paste onto my website my header and navigation are on top of each other

 

please help

can you share link to your site?

15 minutes ago, tuanphan said:

can you share link to your site?

https://www.nicholasvaldo.com

22 minutes ago, nicholasvaldo said:

https://www.nicholasvaldo.com

You want

annoucement bar

header bottom

header top

is this right?

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. 

I've been trying all night to figure it out by I can't 

18 hours ago, nicholasvaldo said:

I've been trying all night to figure it out by I can't 

Add to Home > Design > Custom CSS

header.Header--top {
    top: 70px;
}

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

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/

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?

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.

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