Jump to content

York: Create fixed header.

Recommended Posts

Hi, I've used this CSS to create a fixed header with a black background:


#header { 
  position:fixed; 
  z-index: 1;
  background-color: black;
  padding-top: 40px;
  width: 100%;
  padding-bottom: 40px;
}


The head fixes great but it drops by some 40 pixels so the content beneath appears above it... what am I doing wrong? I need to push the header back to the top of the page!

Thanks.C

Edited by cmeadmore
Initial Revision
Link to comment
  • 2 months later...
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

You're almost there @cmeadmore. It's hard to help without a link to your site, but this should get you started.

First, on the original code you provided, you need to change the margin value to push the header to the top of the page. So it should look like this:


#header { 
   position:fixed; 
   z-index: 1;
   background-color: black;
   padding-top: 40px;
   width: 100%;
   padding-bottom: 40px;
   margin-top: 0px;
 }

And second, copy/paste this into the Design > Custom CSS panel, to push the page content below the header. You can change out the '87px' for whatever looks good on your site.


@media only screen and (min-width: 760px) {
   .site-page {
       padding-top: 87px !important;
   }
}

(The '@ media' callout just ensures your page content won't be pushed down on mobile devices)

Link to comment
  • 11 months later...
  • 6 months later...
  • 1 year later...
12 hours ago, apple_pie777 said:

Hi guys!
I need this answer too ❤️
Anyone could help?

Add to Home > Design > custom CSS

header#header {
    position: fixed;
    left: 0;
    right: 0;
}
main#page {
    margin-top: 100px;
}

 

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
  • 5 months later...
On 10/1/2020 at 6:24 PM, dgirardi said:

Hi all. Trying to implement the code options above but the space between the header and content ends up being different on various pages. Any ideas? Thanks. 

Can you share site url? We can check easier.

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.