{"id":1921,"date":"2016-08-22T16:07:42","date_gmt":"2016-08-22T21:07:42","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1921"},"modified":"2016-08-22T16:07:42","modified_gmt":"2016-08-22T21:07:42","slug":"using-css-to-create-a-fixed-header","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-css-to-create-a-fixed-header\/","title":{"rendered":"Using CSS to Create a Fixed Header"},"content":{"rendered":"

Fixed headers are a popular trend in web design, and adding one to your site can be as easy as adding a position: fixed line to your CSS, but often it’s a little more complicated than that. Some other styling factors you’ll need to consider are top, width, and z-index. It’s important that you set top to 0 if you want the header to be fixed to the very top of the page. Additionally, you’ll probably want to make the width of the header 100% if it isn’t already — the fixed header might look a little strange as you scroll down the page if it doesn’t take up with entire width of the screen. You should also definitely add a high z-index to ensure that the header scrolls over all of the content below it, not\u00a0underneath<\/em> it.<\/p>\n

Here’s an example of what the typical CSS code might look like to make a header appear to be fixed.<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. .fixed-header{<\/span><\/div><\/li>\n
  2.  <\/div><\/li>\n
  3. position<\/span>:<\/span> fixed<\/span>;<\/span><\/div><\/li>\n
  4.  <\/div><\/li>\n
  5. top<\/span>:<\/span> 0<\/span>;<\/span><\/div><\/li>\n
  6.  <\/div><\/li>\n
  7. width<\/span>:<\/span> 100%<\/span>;<\/span><\/div><\/li>\n
  8.  <\/div><\/li>\n
  9. z-index<\/span>:<\/span> 10000<\/span>;<\/span><\/div><\/li>\n
  10.  <\/div><\/li>\n
  11. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    If you’d like the header to be positioned statically or absolutely and\u00a0then be fixed once you’ve scrolled past it, you can do this using simple jQuery and JavaScript to calculate the height of the area above the header, and have the fixed styling added dynamically to the header after the user has scrolled past that point. In the following example, #nav is the header, #top is the area above the header, and .fixed-header is the CSS class that contains the fixed positioning styling:<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    javascript<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. var n = $(&quot;nav&quot;);<\/div><\/li>\n
    2. var height = $('#top').height();<\/div><\/li>\n
    3.  <\/div><\/li>\n
    4. $(window).scroll(function(){<\/div><\/li>\n
    5. if($(this).scrollTop()&gt;height){<\/div><\/li>\n
    6. n.addClass(&quot;fixed-header&quot;);<\/div><\/li>\n
    7. }<\/div><\/li>\n
    8. else{<\/div><\/li>\n
    9. n.removeClass(&quot;fixed-header&quot;);<\/div><\/li>\n
    10. }<\/div><\/li>\n
    11. })<\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      Share and Enjoy !<\/h3>
      0<\/span><\/span>Shares<\/small><\/div>
      <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

      Fixed headers are a popular trend in web design, and adding one to your site can be as easy as adding a position: fixed line to your CSS, but often it’s a little more complicated than that. Some other styling […]<\/p>\n

      Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1921"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=1921"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1921\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}