• Home
  • About
    • About
    • Contact
    • Privacy Policy
    • Disclosure
    • Work With Me
  • College
    • Dorm Life
    • Money and Budgeting
    • Organization
    • Productivity
    • Studying
  • Blog Advice
    • Starting A Blog
    • Favorite Blog Tools
    • Blogging Resources
    • Making Money
    • Blog Growth
    • Income + Traffic Reports
    • Design
    • Coding Tutorials
    • Social Media
    • Genesis Framework
    • WordPress
    • Blogger
  • Wellness
  • Lifestyle
  • Career
    • Internships
    • Interviewing

Jessica Slaughter

How To Make A Sticky Navigation Bar On Blogger

in Blogging, Coding Tutorials on 08/05/14

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!

How To Make A Sticky Navigation Bar On Blogger | Jessica Slaughter

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!

Was this tutorial helpful for you? Consider endorsing me on my Activate by Bloglovin’ profile! It helps me understand what I do best, and what types of posts y’all find the most helpful!

49 Comments

  • Twitter 1
  • Facebook 3
  • Pinterest 16
« How To Choose A Font For Your Blog
How To Take A Break From Blogging »
Jessica Slaughter Blogger

Hey there! I'm Jessica, a 22 year old Software Engineer at Google living in Seattle, Washington. Welcome to my blog! Expect a lot of college, blogging, career, and healthy living advice along with some mixed-in life ramblings!

Follow

Top Posts & Pages

  • 12 College Dorm Room Must Haves
    12 College Dorm Room Must Haves
  • How To Customize The MailChimp Signup Form On Your Blog
    How To Customize The MailChimp Signup Form On Your Blog
  • How To Earn Money Using ShopStyle Affiliate Links
    How To Earn Money Using ShopStyle Affiliate Links
  • Lazy Meal Prep Ideas for College Students
    Lazy Meal Prep Ideas for College Students
  • Finding Your Instagram Style
    Finding Your Instagram Style
  • The Ultimate Guide To Getting Fit In College
    The Ultimate Guide To Getting Fit In College

Copyright © 2022 · Design by Jessica Slaughter

Copyright © 2022 · Glam Theme on Genesis Framework · WordPress · Log in

Disclosure

Some of the links below are affiliate links, which means that if you click on a product link, I may receive compensation. This compensation comes at no additional cost to you, and as always I only recommend products I trust!

Jessica Slaughter is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.