Life in the Grid > Tech Insights > Coding > Simple CSS Fixed Header

Simple CSS Fixed Header

Posted by Cory Lamle - May 20, 2012 - Coding, Think Different, Tools, Videos - 37 Comments

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

Source code

//Create a fixed element
<div id="header-fixed">
	<div id="my-menus">
	...
	</div>
</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.

Source code

//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:

Source code

//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);
});

Script Courtesy of MaxMorganDesing.com

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 some additional styling that gives the bar more of a 3-D feel.

Source code

//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"} );

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?

This link as has been manually translated into Croation

37 comments

Leave Reply

Terence Chang says:

July 16, 2012 at 9:57 pm

Nice. I primary use the fixed position bar at the bottom to display my latest special and affiliate links.

Good to hear from you! ;)

Reply
- Cory Lamle says:
  
  July 18, 2012 at 6:38 pm
  
  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!
Juan Timana says:

July 23, 2012 at 4:30 am

I love this tutorial, thank you very much.

Reply
- Cory Lamle says:
  
  July 23, 2012 at 6:08 am
  
  Excellent! Thanks for touching base Juan… I hope do some more like this in the future.
Jewel says:

August 31, 2012 at 8:10 am

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.

Reply
Jewel says:

August 31, 2012 at 8:11 am

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.

Reply
- Cory Lamle says:
  
  September 2, 2012 at 12:26 pm
  
  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!
Jewel says:

September 3, 2012 at 4:55 am

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.

Reply
Juan Timana says:

September 4, 2012 at 1:18 am

Hey Cory, BTW my site is now using this little trick you posted here, thanks a ton bro.

Reply
- Cory Lamle says:
  
  September 4, 2012 at 6:21 pm
  
  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…
liliya says:

September 6, 2012 at 3:55 pm

So easy! Such a good example! You’re AWESOME!

Reply
Gregg says:

September 7, 2012 at 7:25 am

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

Reply
- Cory Lamle says:
  
  September 7, 2012 at 10:31 am
  
  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!
Mat says:

September 24, 2012 at 7:27 pm

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

Reply
- Cory Lamle says:
  
  September 25, 2012 at 12:56 pm
  
  Hey Mat,
  
  I checked out your site, it looks like the header is staying fixed correctly, at least in Chrome…
Mat says:

September 25, 2012 at 11:21 pm

hey ya i got it to work after some fiddling-thanks

Reply
nydene says:

September 26, 2012 at 1:41 am

video is flows the fixed header.How to apply the above javascript

Reply
- Cory Lamle says:
  
  October 4, 2012 at 12:25 pm
  
  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…
Al says:

October 6, 2012 at 4:15 pm

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

Reply
- Al says:
  
  October 7, 2012 at 10:18 am
  
  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
- Cory Lamle says:
  
  October 7, 2012 at 8:43 pm
  
  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!
Shawn Hazen says:

November 15, 2012 at 12:41 pm

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!

Reply
- Cory Lamle says:
  
  November 15, 2012 at 2:17 pm
  
  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!
- Shawn Hazen says:
  
  November 15, 2012 at 2:34 pm
  
  Excellent! Thanks so much!
James says:

December 11, 2012 at 7:17 am

Love the tutorial I have used it for my new design over at:
http://www.listacker.com – Social Bookmarking!

P.S Your shareoholic social bar does not appear to be working?

Thanks

Reply
AK Ted says:

December 23, 2012 at 7:22 am

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!

Reply
AK Ted says:

December 23, 2012 at 7:24 am

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.

Reply
kaiser harukari says:

December 28, 2012 at 1:27 am

It’s so easy to integrate. I thank you for this. I just improved my design.

Reply
- Cory Lamle says:
  
  January 1, 2013 at 1:08 pm
  
  Hey Kaiser!
  
  Thanks for dropping by… Glad you got thinks going!
CJ says:

January 20, 2013 at 7:06 pm

i’m trying this effect and my problem is that the fixed div overlaps with the window scrollbars in IE. i works ok with firefox and chrome though

how can i remedy this ?

here is the page i am working on: http://www.cjmagowan.com/home

Reply
- Cory Lamle says:
  
  January 22, 2013 at 8:01 am
  
  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!
CJ says:

January 22, 2013 at 8:22 am

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

Reply
Samantha says:

February 9, 2013 at 12:24 pm

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.

Reply
- Cory Lamle says:
  
  February 11, 2013 at 4:53 pm
  
  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!
Miguel B. says:

April 29, 2013 at 10:52 pm

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?

Reply
- Cory Lamle says:
  
  April 30, 2013 at 11:50 am
  
  Hey Miguel,
  
  For the JavaScript it will need to go into the header.php file.
  
  Hope that helps!
sichuan travel says:

May 19, 2013 at 11:39 pm

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

Reply