It’s been a week now since I finished my blog’s redesign, and I’ve had some amazing feedback! This blogging community that I’ve found myself in is seriously the best, and it’s your constant motivation and inspiring words that keep me going! After I debuted this new design, I had multiple bloggers ask me about how I did certain parts of the design, especially the sticky navigation up there at the top. I’ve always loved the look of a sticky navigation bar, because it keeps the main part of the blog less cluttered, and it’s always there no matter how far down you scroll on the page. To keep other beginner designers like myself from having to go on a whole tutorial scavenger hunt, here’s a guide for making your own sticky navigation bar!
1. Create your basic navigation bar
Before we can start any of the fancy editing, we need to make a simple navigation bar with all of your pages linked in. If you’re wanting to link to a specific type of post (lifestyle, recipe, fashion, etc.), make sure you’ve already added tags to those posts so they’ll show up when we link to them!
Go into the Layout tab of Blogger and create a new HTML/Javascript gadget in the header area. Paste the code below into it, and enter in your own information based on the hint in caps. If you want to link to a specific label, you would paste the URL of that label where it says LINK.
2. Decorating Time!
If you go to Template -> Customize -> Advanced, you can find the “Tabs” elements and edit some design aspects, like the background color and borders. This is where you can get creative! After you get the basic look done, go to Template -> Edit HTML and find “<b:skin>…</b:skin>” (CTRL + F is a coders best friend). Open that section up by clicking the “…” and scroll down to find the Tabs section. This code does all of the fine tuning for your navigation bar, from the style of the font to the color of the links. This is where the crazy stuff starts, so if you’re not skilled with coding, I found this FANTASTIC cheat sheet from xomisse that really breaks it down. Otherwise, go ahead and edit the code to your liking.
3. Making Your Navigation Bar Sticky
First, I’d suggest removing Blogger’s navigation bar. I didn’t even realize you could do this, but it’s so easy! Just go to the Layout tab, click on NavBar, and turn it off. Simple as that.
Now go to Template -> Customize -> Advanced ->
Add CSS and add the code below. For those of you who didn’t know about this nifty little tool, anything you place in Add CSS gets put above . It’s perfect for anyone who looks at their blog’s HTML and freaks out a bit. It can be pretty overwhelming!
One issue I noticed with my own blog was that my first link (Home) was partially off the page on the left side. To fix this, I just increased the “left” value until it fit.
You’ve now finished making your sticky navigation bar!
UPDATE: I will no longer be following comments on this post, so if you’re having any trouble, feel free to tweet at me!
Looking for more blogging tips? Join my group Pinterest board!
