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 post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...