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

York: Create fixed header.


cmeadmore

Question

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
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

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

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

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