Previous Page

Published on May 20th, 2012

Featured Image

Intro

Content is king when it comes to website traffic, however if your site doesn’t show well then you could be losing some of your audience or even business prospects.   When I visit a website and see a fixed item done correctly it usually stands out and my impression meter of the site automatically goes up even before I read the content.  Are you doing something to standout?

In this post we will run through how you can add a css fixed header to your site and gain a visual distinction.   With less that 10% of all internet sites using fixed assets correctly, you can set yourself apart and allow your sites to have a different more elegant flow.

Video Walkthrough

Step 1: Locate Elements to Fix

The first thing to do is locate your target element(s) you want to set as fixed.  This is very easy with a DOM inspector like Google Chrome or Firebug.   To see how this is done visit the post Fast Website Layouts.  Once you have located the items place them inside a div element with an id such as:

//Create a holding element
<div id="my-menus">...</div>

Step 2: Set CSS Styles

Once you have your items set as fixed you will need to most likely do some manual adjustments to the content inside the fixed div element.   Remember that fixed items work on an absolute layout so top, left, right and bottom are going to be very useful for getting the items positioned correctly. If your header is large you can add an opacity (transparent) layer that will allow the content to bleed through the back.  This can be done by using the opacity setting in your CSS file.

//Map the correct css style to create the fixed position 
div#header-fixed {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;} 
div#my-menus {background:#000; height:75px; opacity:0.8}

Step 3: Validate Assets

Once you have your header fixed in position correctly you will want to make sure that other assets like videos and other fixed elements are accounted for when scrolling happens. In order to clean up videos from YouTube you can add the following script:

 Script Courtesy of MaxMorganDesing.com 

//Set Videos below header
$("iframe").each(function(){
	var ifr_source = $(this).attr('src');
	var wmode = "wmode=transparent";
	if(ifr_source.indexOf('?') != -1) {
		var getQString = ifr_source.split('?');
		var oldString = getQString[1];
		var newString = getQString[0];
			$(this).attr('src',newString+'?'+wmode+'&'+oldString);
	}
	else $(this).attr('src',ifr_source+'?'+wmode);
});

It is also important to work with other fixed assets to make sure that they don’t collide with your new fixed header. Every site is going to be different so you will have to evaluate any other fixed assets you might have. Below is a script to adjust a WordPress plug-in called ShareBar. This script keeps my header from colliding with the ShareBar as the user scrolls. It also has additional styling that gives the bar more of a  3-D feel.

The sharebar on this site has been removed since this video…

//Fix ShareBar
var $sharebar     	   = jQuery('#sharebar');
var $sharebar_elms     = jQuery('#sharebar li iframe');
var $sharebar_facebook = $sharebar_elms.get(0);
jQuery($sharebar_facebook).css({"width":"60px", "height":"62px", "margin-left" : "7px" });
jQuery($sharebar).css({"margin-top" : "110px", "border-radius" : "5px", "box-shadow" : "0 8px 6px -6px #555, inset 0 0 10px #D3D3D3", "border" : "1px solid #D3D3D3"} );

Step 4: Slide Away

In order to get a portion of the header to slide away and give us a more stream-lined navigation bar there is some additional logic that I added after creating the video. This logic basically gives a whoosh effect to the site logo and social links and hides them out of site. Below is the code that makes that happen. Basically we set an event to listen for the window scroll and when its past a height of 80 we just hide the elements we don’t want to see anymore…

$(window).scroll(function () { 
	if ($(this).scrollTop() > 80) {
		$("#top").addClass("grid-hide-header");
		$("#header_content").hide(300);
		$("#search-trigger").hide();
	} else {
		$("#top").removeClass("grid-hide-header");
		$("#search-trigger").show();
		$("#header_content").show(300);
	}
});
No Risk, No Contracts! - Learn coding, Web Design and More!

Wrap-Up

So with a few simple adjustments of your header you can create a fixed layout that navigates easier and leaves a unique impression to those visiting your website!   Hope you enjoyed this article on setting up the fixed header.

What do you think?

Have you used fixed assets before?

95 thoughts on “Simple CSS Fixed Header”

    1. Cory Lamle

      Yep, I think more people are realizing that proper placement on a site really gives them the edge they need keep important content in the users view.

      Thanks for touching base via the comments Terence!

    1. Cory Lamle

      Excellent! Thanks for touching base Juan… I hope do some more like this in the future.

  3. Jewel

    Hi Cory,

    Really amazed.
    How can this type of fixed header affixed in blogger or wordpress site like my site (perfectnewgadgets.blogspot.com)

    I’m a new comer with just simple idea. So, please give me some specific knowhow, if possible.

    And, please, don’t laugh at my small and new site. It needs many scrutiny and refurbishment.

  4. Jewel

    Hi Cory,

    Really amazed.
    How can this type of fixed header affixed in blogger or wordpress site like my site?

    I’m a new comer with just simple idea. So, please give me some specific knowhow, if possible.

    And, please, don’t laugh at my small and new site. It needs many scrutiny and refurbishment and many many qualitative contents also like yours.

    Thanks in advance.

    1. Cory Lamle

      Hey Jewel,

      Thanks much! With Blogger or WordPress.com I’m not 100% sure if they expose access to your templates and PHP files. If they do then it should be pretty simple to add some css to those files. However if they don’t then you may not get the customization’s your looking for… You can easily take the source on this article and add it to your site, if they expose file access…

      Hope that help!

  5. Jewel

    Thanks Cory,

    Blogger permits to add CSS to any blogs template. Unfortunately I’m unable to add any CSS to my blog. Maybe it needs assistance of a pro or maybe someday I’ll do it myself with proper knowledge.

    Thanks again for everything.

    1. Cory Lamle

      Very nice Juan, I like it! The opacity looks really smooth. The forums area of the site is especially going to benefit when someone comes across a large thread. Excellent…

  8. Gregg

    Really informative video and related text tutorial! Very helpful.

    I’m not sure where to trouble shoot my issue: body elements partially hidden under the newly fixed header. Is there a way to “bump” content down so that they are clear of any fixed (in my case on top of page) elements?

    Thanks!

    Gregg

    1. Cory Lamle

      Hey Gregg,

      Thxs for the feedback! Not 100% sure if I understand the issue, but I’ll give it a shot. On the body tag you should be able to set style=’margin-top:30px’ or something like that, you could also apply this style to a div tag that comes right after the body tag. This would help push any content initially below the fix element.

      Hope that helps!

  9. Mat

    Hey I’m new to html- I tried using the tutorial, but could only get the header to stay fixed, and then the would keep moving. Any idea what I can do?

    Thanks,
    Mat

    1. Cory Lamle

      Hey Mat,

      I checked out your site, it looks like the header is staying fixed correctly, at least in Chrome…

    1. Cory Lamle

      For video overlays you can check out the video in the post source code, also you might have to do a google search for wmode=transparent to double check the various settings for the video player your using…

  12. Al

    Hey Cory,

    1st: Very cool tip eh

    2nd: I’ve been trying to set this up on my mobile site to fix the header section. Worked but the rest of the content [div’s] moved up behind the header logo. I see your javascript (above) says iframe, so assuming here (don’t like to assume eh lol) it is for video iframes.. and not content.. Would you know how I could fix it and push the page back down.. I really like the idea to keep my logo in front of the user.

    Thanks eh

    Take care,
    Al

    1. Al

      Hey Cory,

      I read though the above again and must of missed it the first time but tried the suggestion you gave Gregg (style=’margin-top:30px’) and wouldn’t work so I tried padding-top:184px and that worked. Still needs a bit of tweaking and probably won’t use it on my mobile site (logo’s a bit big at 184px) but I will use it on a couple demo sites..

      Thanks again.

      Take care,
      Al

      1. Cory Lamle

        Hey Al,

        Thanks for touching base! I see you got it going that’s great! As far as your original question on the iframe that is only for the video as the majority of most embeds (at least from the big guys, youtube, vimeo) mainly use the iframe. If your doing a responsive design site, you might check out one of these tools as they can help you with multi-platforms…

        Cheers!

  13. Shawn Hazen

    Hey!

    Landed here while googling a fix for my problem. My site uses the method shown, but it breaks on the iPhone—specifically, if you try to zoom in, the header doesn’t zoom and everything gets all wonky.

    Any ideas?

    Thanks!

    1. Cory Lamle

      Hey Shawn,

      Thanks for stopping by…

      You might try this workaround. You could also maybe attach an event to the window zoom and monitor any css changes to the items in question when a zoom occurs…

      Hope that gives you some ideas…

      Cheers!

  15. AK Ted

    Very nice walk-through! Noticed a typo. In step 3 (Validate Assets), it says
    Script Courtesy of MaxMorganDesing.com
    Should be design, not desing. And that link has a double http://.

    Thanks for the great tutorial!

  16. AK Ted

    Very nice walk-through! Noticed a typo. In step 3 (Validate Assets), it says
    Script Courtesy of MaxMorganDesing.com
    Should be design, not desing. And that link has a double http://.

    Thanks for the great tutorial!

    Hrm. This comment form had an error on submittal, and said try again. Then said duplicate comment. Not sure if it went through. Sorry if it did.

    1. Cory Lamle

      Hey CJ,

      Thanks for stopping by! Nice site BTW… I’m not sure if I see any issues with your site, maybe shoot me a screen shoot of what issue your seeing?

      Cheers!

  19. CJ

    hello Cory,

    It’s working fine now.. the problem that is cause by the css position property of the to “absolute”. now it’s fixed and following your tutorial is great..

    thanks

  20. Samantha

    Hello!
    Your tutorial was good, but it didn’t solve my problem. All of my content that’s supposed to be BELOW my header and nav bar automatically jumps up behind it, so half of my content is hidden.

    1. Cory Lamle

      Hey Samantha,

      Thanks for stopping by the site! You might have to do some manual adjustments, the code won’t be a one size fits all in some cases. You might want to double check the parent containers position and the z-index. Sometimes it takes a bit of fiddling to get it just right… Hope that helps a bit…

      Cheers!

  21. Miguel B.

    Thanks for the great tutorial. I applied it to TheWeeklyRoundup.com

    Quick Question Thought.

    Where do we insert the Javascript in order to have videos hide behind the header.

    I.e. which file do I modify is it header.php or the stylesheet?

    1. Cory Lamle

      Hey Miguel,

      For the JavaScript it will need to go into the header.php file.

      Hope that helps!

  22. sichuan travel

    Nice blog here! Additionally your website a lot up fast! What host are you the use of? Can I get your associate hyperlink on your host? I wish my site loaded up as fast as yours lol

  23. Mor

    Thanks. How do redirect all links (e.g. from top navigation menu) to target the content area?

  24. Michael Perrenoud

    Fantastic article and video my friend, I needed to get it implemented for a client of mine and the way you did it is just beautiful! Just a fantastic job!

  25. bo

    hi there,
    nice.
    how does this work on ipad? older ios version?
    does the header remain as fixed was not working
    as a supported then?

    thanks

    bo

    1. Cory Lamle

      Hey Bo,

      Yes I just tried on my ipad gen 1 and it looks to be working well :)

      Cheers~

  27. artha

    hello!
    thanks for the tutorial!
    i have a problem with my fixed header.. the code not preview the actual size of the image. i want the header stay over along the top of the website, but it turns to a short header, no matter how long i have resize the header’s image, it keep stay short.
    please check my blog’s header at agrassflower.blogspot.com if you can’t understand my bad english >. <
    sorry but please help.
    thankyou!

    1. Cory Lamle

      Try this instead:
      < div style="display:scroll;position:fixed;z-index:2000; top: 0; margin:auto; overflow: hidden;width:1100px;"...

      Cheers~

  30. Majda

    Hi! I’ve tried this whole process probably three times now (and I’ve searched other websites) but I can’t seem to integrate this into my html. Is there any way you can help me?

  31. Nishant

    when i am using position fixed other div elements are going under it and i can’t use top for other elements as website doesn’t stays responsive

    1. Cory Lamle

      Hey Nishant,

      It looks like the theme your using will dynamically add a class called .tc-header when the browser is a specific width using a css query rule. You will have to located that class and play around with the media queries to validate you get the desired results with a fixed header…

  32. Ying Chun

    Hi Cory,

    Thanks for the tutorial on fixing the header. I have used your suggestion to fix the header and it works.Thanks ! … the header is fixed…. but unfortunately, the top of my contents page is then “hidden” under the fixed header. (I.e when I go to my web page – I can’t see parts/top of my contents page)

    I then googled for answers to fix this — some of which suggested that to put either a top margin or top padding for the contents page.

    I used top padding but the minute I do this I loose my fixed header … I can only use one of the otehr but not both.

    I am new in this … hope I explained correctly/clearly enough.

    Thanks for your help in advance.

    Cheers,
    Ying Chun

    1. Cory Lamle

      Hey Ying,

      Thanks for stopping by… If you want to send me your url I’ll have a look at the issue and see if there is a solution…

      1. Ying Chun

        Hi Cory,

        Many thanks for your help ! It worked !!!
        I was using the margin-top and padding-top codes, but as I mentioned, once I put the CSS codes for margin-top /padding-top, the header becomes “unfixed” – and vice versa. Did one at a time as I wanted to see effects of each set of codes … ;-)

        So, I finally added both the codes (for fixing top header and the margin-top) at the same – and bingo ! I got what I wanted !!!

        Probably the sequence of which code gets added first shouldn’t matter ? — but in my case, it did ! I am new and I can’t explain ! But it worked !!! Thanks for your help, Cory !!!

        And … THANKS again for the codes !!!!

        With much appreciation !

        Ying Chun

  33. Matt Renner

    Hi Cory,

    Great work with your tutorial and snippets! This looks like my site could use this fixed header, but I can’t find the correct place to implement your idea in to my page-default-template.php and also my main.css files. Can you help?

    For instance – on the page-default-template.php it looks like the code would nested outside of this code…

    And for the main.css file I am not sure how to integrate with the current code… 

    			


.thrColFixHdr #header {
	background-color: #CECF9C;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	height: 110px;
	padding-top: 10;
	_padding-right: 10px;
	padding-bottom: 10;
	_padding-left: 20px;
	background-image: url(../images/header-AFQ.gif);
	background-repeat: no-repeat;
} 
.thrColFixHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

    Appreciated!

    1. Cory Lamle

      Hey Matt,

      Honestly it is pretty tricky to get it going and does take quite a bit of playing around. I would user “border: 1px solid red” around each of your items to locate them on the page. Then its a matter of playing with the location elements, “top right bottom left” and the box elements “margin padding”, once you get those located and formatted its a matter of moving the elements around until they fit.

      Hope that helps!

      1. Matt Renner

        I’ll keep playing with the placements. This site is not a WP site and the code is a mesh of languages (and about 8 years old), so it is a bit tougher to work with.

        Thanks for the border idea though.

        Regards,
        Matt

  34. Richard (NL)

    I tryed fixing a text on top of page, it works in chrome on desktop and android tablet, BUT
    it wont work on android webview (android 2.3.3)
    is there a work around that ?

  35. Richard

    I tryed fixing a text on top of page, it works in chrome on desktop and android tablet, BUT
    it wont work on android webview (android 2.3.3) or in the standard browser.
    is there a work around that ?
    it works on a phone with newer version of android.

  36. Ganesh

    I am generating the grid using div and span tags but i want to set the fixed header for my grid how can i do it. my grid values will be generating dynamically.

      1. Veer Havik

        Hi Corey– in Chrome you lose your tooltip-like search box as you scroll down; just thought you’d like to know :)

  37. Richard Foate

    Hey Corey

    Could you take a look at my test page for fixing the header on my site by chance ? http://Www.dvdorchard.com.au/comedy-dvds.asp is the page in question. The div will not be on the page if it’s being viewed from a mobile device.

    I have a div of header-fixed around the header, not hard to tell what this on the page.

    I have css for the div as per your suggestions, but no fixed header….

    Hoping you can help. Ideally I’ d like to do a similar thing to your site, fix the entire header with opacity of 0.8 or similar but have my search bar, the red bit, not opaque.

    Waiting with baited breath, have tried a few solutions to date, none if which have worked, very frustrating.

    Thanks :)

    1. Richard Foate

      Hi again,

      OK, so it’s working on that page now, BUT

      My issue is with page widths. I have a min width of 990px and max width of 1320px sitewide.

      Fixing the header appears to throw out the min and max widths,the header fixes itself to a smaller width than the body.

      Does anyone have any ideas to help please ?

      1. Cory Lamle

        Hi Richard,

        Sorry for the delayed response. It looks like it works quite well… I’m not 100% sure what issue visually your trying to fix, when re-sizing the window it looks like it works, can you provide a bit more detail?

        Cheers~

  38. Bob Easton

    What a great start! Just enough to get us going and exploring. Thanks!

    Now, when are you going to show us the less-simple technique that whisks away the upper part of your header and scoots the menu bar to the top?

    1. Cory Lamle

      Hey Bob,

      I forgot about the whisker :) I’ll have to dig up the code and update the post… Thanks for the reminder!

  39. arpit sharma

    Hello cory

    Great tutorial
    As i can see now in your site only navigation stays on top and the logo disappear it would be great if u could tell how to do that
    Thamks

    1. Cory Lamle

      Hi Arpit,

      I went ahead and added Step 4 to the post, it should have the whoosh away logic :)

  40. James

    Hi, I was wondering if there was a way to adapt what you are using here so that it would only remain fixed in certain instances. In my case I want it to revert back to a non fixed position if the web page is scaled under a certain pixel size. I am using a responsive theme and when viewed on a phone for instance the header is taking up about 50% of the screen

    1. Cory Lamle

      Hey James,

      You can! Just use CSS media queries with the min-width setting and you can toggle how a CSS style class is rendered based on the viewport. Here is a quick overview…

      Cheers~

  41. Eric

    Hi Cory,
    Thanks for the nice simple script it worked nicely, just not sure how to implement step 4. im using this for templated website, ive already got the fixed-header done correctly in header.tpl and style.css, but Not too sure about were to implement step4 if you can help out thanks.

    1. Cory Lamle

      Hey Eric,

      No Problem. Basically take the entire source in step 4 and place it in your script tag that is in your head. Then in the first part of the if statement you will need to pin-point the items you want to hide via a DOM inspector. In the second part of the if statement you will pretty much use the same elements that you hid and just show them them using the show() method… The > 80 is used to trigger how far you have scrolled…

      Cheers~

  44. Hannah

    The code is great, thanks!
    Do you by any chance know how to stop your content from moving under the header? I have added a margin to the top of my content wrapper which works when you first open the site up however when scrolling everything moves underneath. This is mainly causing problems as it is a one page site with page anchors, when a link is clicked its all moving under my header!

  46. Huey

    I like the valuable info you provide to your articles.

    I will bookmark your blog and test once more right here regularly.
    I am slightly sure I will be told lots of new stuff right right here!
    Best of luck for the next!

  48. Jan

    I got ths website frm my friend who topld me about this web page and at the moment
    this time I am browsing ths web site and reading very informative articles orr revieas at ths time.

Comments are closed.