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!


Navigate