Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



CSS Lesson 3: Creating Fixed Headers and Social Icons

How To Create a Fixed Header, Navigation Menu, or Social Media Links!Hey friends! Today I wanted to finally cover something that I am asked probably five times a week. I’m going to explain how to create a fixed image or social network icons. In other words, an image or icons that stay put on a website even when you scroll. The social network icons on my other blog are an example of this.

I didn’t dive into this right away because I wanted you to actually learn something first. You can’t just go creating things without knowing exactly what you’re doing, which is why I covered bits of this process in parts 1 and 2 of my CSS lessons:

CSS Lesson 1: DIV Elements
CSS Lesson 2: DIV Positioning

Now that you’re comfortable with div positioning, we can move onto more of the Fixed Element side of things. The fixed positioning will be exactly what we use to create those “floating” or static images on our website.

As I mentioned in Lesson 2, an example of a fixed element would look like this:

#header{
position:fixed;
top: 0px;
left:0px;
width:200px;
}

If we were to create a header that stays put as you scroll, we’d need to wrap our header in a div with the id “header” as shown in the example. So, let’s do that:

<div id=”header”><img src=”http://yoursiteurl.com/location/imagename.jpg” alt=”header”></div>

This code goes in your HTML portion of your site, or if using Blogger, you can stick it in a new HTML/Javascript widget.

Now we add the CSS for the element to our CSS section, and tweak it a little bit to better suit the header image:

#header {
position:fixed;
top: 0px;
left:0px;
width:1000px; – the width of your image
height: 100px; – the height of your image
z-index:999999;
}

Wait, what is “z-index”?

The z-index property tells your code to place the element above or below other elements. Think of it in layers. You want your header image to sit ABOVE the other layers (content area, sidebar area, etc) as you scroll, right? Otherwise, you risk portions of your site displaying over top of the header.  The z-index property above tells your site to display this layer above all other layers. The number can be whatever you want, as long as it’s higher than other elements with possible z-index settings. I chose 999999 because that pretty much makes it impossible for there to be another layer with a z-index that high.  Here is an example:

A layer called “content” has a z-index of 0 (zero). It is the bottom most layer.
A layer called “sidebar” also has a z-index of 0 (zero). They are on the same level.
A layer called “menu” has a z-index of 2 (two). It is two layers above the previous layers.
A layer called “text” has a z-index of 1 (one). It is above the first two layers, but below the “menu” layer.

Make sense? Good. Now we can move on…

Try the above code on your site so you get a feel for what it does. If you change the “top” and “left” positions, you will notice that the header moves according to the pixels you specify.

Creating A Fixed Menu

You can use the same idea for creating a navigation menu that you want to stay put as you scroll. Just wrap your menu code in a <div> in your HTML code and give it an id. In the CSS, create the properties for that id as we did above, like so:

<div id=”menu”><a href=”home.html”>HOME</a> <a href=”contact.html”>CONTACT</a> <a href=”about.html”>ABOUT</a></div>

#menu {
position:fixed;
top: 0px;
left:0px;
width:1000px;
height: 50px;
background-color:#ffffff;
z-index:999999;
text-align:center;
}

Giving the menu a background colour ensures that the background of the menu will be solid, which means that the text won’t blend in with your other content as you scroll.

Centering It All

Div positioning can be tricky and can take some time to get used to. You’ll experiment with different situations, and try to figure out why some things aren’t working. For example, why pushing the menu or header we created in the examples above to the left 500px instead of 0px looks fine on your screen, but is totally out of place when you look at it on a smaller browser window or a different computer. This is because when you specify “left:500px”, you are moving it 500px away from the left edge of your screen, not any other existing element on the page as we discussed here. If you don’t have the same size screen as others, it won’t display in the proper place. So, what do we do? We trick the code a little bit. There are various ways you could do this, but I will show you the easiest:

#header {
position: fixed;
top:0px;
left:0;
right:0;
margin-right: auto;
margin-left: auto;
width:1000px;
height:100px;
z-index:999999;
}

First, we specify a right side positioning as well, and then set the margins on either side of the screen to “auto”.  Our element will appear in the very center of the screen, regardless of the screen size. If we wanted to move it to a specific place, we could simply then adjust the “left” value, for example, “left:200px” will then move the element 200 pixels to the left of center, instead of from the side of the screen.

#header {
position: fixed;
top:300px;
left: 200px;
right:0;
margin-right: auto;
margin-left: auto;
width:1000px;
height:100px;
z-index:999999;
}

In the above example, I’ve moved it 300px from the top of the screen, and 200px left from the center. Want it to move backwards, to the left instead of the right? Just make that a negative value, i.e. “left: -200px”.

What About Social Media Buttons?

Same idea. You can review this post for information about creating image links, which is exactly what we want to do to create social icon links. You’d then wrap your image links in a div with a new ID, just as we have done above, so:

<div id=”icons”>
<a href=”http://facebook.com/yourusername”><img src=”http://yourimageurl.com/facebookimage.jpg”></a>
<a href=”http://twitter.com/yourusername”><img src=”http://yourimageurl.com/twitterimage.jpg”></a>
<a href=”http://pinterest.com/yourusername”><img src=”http://yourimageurl.com/pinterestimage.jpg”></a>
<a href=”http://instagram.com/yourusername”><img src=”http://yourimageurl.com/instagramimage.jpg”></a>
</div>

And the CSS:

#icons{
position: fixed;
top:0px;
left: 0px;
right:0;
margin-right: auto;
margin-left: auto;
width:50px; – The width of the area you want your icons to appear in
height:300px; – The height of the area you want your icons to appear in
z-index:999999;
}

You can position this div element anywhere on your page by changing the left and top values as we talked about above! The width and height will be the entire area you want your icons to appear in. Imagine your social icons inside of a box. How big is that box? Are your social icons going vertically down the side of your site? If so, make the width of the div the same width as the images. How tall is the box once you’ve stacked your icons on top of one another? Put that value in the height area.

As you can see, this takes a bit of playing around. I encourage you to practice creating fixed div elements and positioning them on your page. You’ll get a better feel for how everything works if you understand what you’re doing.

I hope you enjoyed this lesson, and I’d love to see what you create with your new knowledge!

-Dana

p.s. If you are sharing this post, please link back here and don’t copy. Posts on this site take a lot of time and knowledge and I do notice when other similar sites copy my hard work as I have very specific methods of doing things. Thanks!


  • Serena Aloserlikeme

    Thank you so much!!!
    I’ve been looking everywhere for this!
    Can’t wait to try it out! ^^

  • THANK YOU for everything that you do – your tutorials are so helpful, and the order in which you post them seems to directly reflect the stage of blog-building I’m at. Your blogs are such wonderful resources and I only wish I’d found you sooner!

  • Thank you so much for this tutorial! I will admit that I tried to copy and paste from this without reading the other two and it DID NOT work for me because I had no idea what was going on! But thank you! The other two posts were very helpful!

    I do have a question though: I want my fixed menu to have background color of black with a text color of white. I’ve Googled what seems like every possible way to change the font color using CSS/HTML but none of them are responding. Could you please help me? Here’s my blog URL for you to see what i’m talking about: http://www.jessclassy.blogspot.com.

    Thank you!
    Jessika

  • Niall Spence

    Nice tutorial with a good example – one thing I will mention in case anyone comes across a similar issue; when I copied the code the quotation marks (“) were a slightly different style to the usual ones my site blog uses, so I had to alter them.

  • emilygrace

    Thank you very much for this. It is the only thing I have been able to find that comes even close to explaining to me what I was looking for. I’m still having a problem though. I did read all of the lead up posts, but am still missing something. I was wondering if I might be able to pay you to fix this one element for me? I know you have made a business of blog design, so I am in no way asking for a freebie. I’m just wondering if you might be willing to do this one kind of “a la carte”? I’m hoping to be able to afford a full design overhaul soon… my email is [email protected] if you are willing…

  • Dave Parmee

    Hi, i spent several weeks trying to get the content to pass UNDER! the header, instead of over it which it was doing using code from other sources, until I saw z-index:999999;. that did it. Does no one else know this? Thanks v much!

  • Aletha France

    Thank you !!!!!! That z-index made ALL the difference. I’d been reading and youtubing and I was about to give up.

  • Hannah Terpstra

    Im so close to getting this! But my post content is above the header im trying to make fixed…. Any idea what Im doing wrong?

  • How do I my social media icons to lay outside of my colums in blogger?I want it to float on the outside of my blog.

    http://www.diyhobbyist.net

  • Robinson Mgeni

    hey thanks for the tutorial its great, am trying to have the same header as you have on this site on wordpress with image on top and navvagtion menu below the header image. when i set the menu to fixed position it stays there but not on top, and when i set top to 0px it jumps above the header image, pllease am i missing something ?

  • Ankit Patel

    see i am not professional designer so can you please explain that how to apply these whole thing to BLOGGER’s blog

  • Ankit Patel

    if possible then please publish video tutorial for blogger.

Navigate