Jump to content

Fixed Header with Announcement Bar

Recommended Posts

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 comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

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