Create a Sticky or Fixed Navigation when Scrolling on Blogger

Many popular sites these days are starting to add a fixed or sticky navigation to help visitors find their way around the site. It means that the reader doesn’t have to scroll back to the top of the page to choose a different page or topic. Instead they have access to the main navigation at all times.

A fixed navigation is placed at the very top of the page and remains there when scrolling down. A sticky navigation is usually placed beneath the header, once the visitors starts to scroll down the navigation will become fixed once it “hits” the top of the browser window.

TUTORIAL 1 – Custom Fixed Navigation Bar

To make your navigation bar appear at the top of your blog on load and fixed to the top of the browser window while the user is scrolling.

1. Firstly, you’ll need to set up your navigation. Here is a tutorial showing you how to create and style a basic navigation bar. I have tons of other navigation bar tutorials here.

2. If you already have a custom navigation menu set up you’ll need to wrap it in a div with the id navigationbar like so

<div id="navigationbar">

... Navigation goes here ...

</div>

3. Go to Template > Edit HTML and above ]]> </b:skin> add the following code –

/* START XOMISSE FIXED NAV BAR */
#navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}
/* END XOMISSE FIXED NAV BAR */

4. To remove Blogger admin navbar, go to Layout > NavBar and turn it off. You’ll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the following

body .navbar { height: 0px; }

TUTORIAL 2 – Sticky Navigation Bar

If your navigation bar is under your header and you want it to stick to the top of the window when you scroll past it then follow this tutorial.

1. Go to Template > Customise > Advanced > Add CSS and add the following code. When you add CSS to the Template Designer on Blogger, it gets placed before ]]></b:skin> in your template. Change the coloured code to suit your blog layout. Click Apply To Blog.

/* START XOMISSE STICKY NAV BAR */
sticknav {
background: #ffffff;
height: 30px;
width: 100%;
margin-right: auto;
margin-left: auto;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
}
.fixed { position:fixed;}
/* END XOMISSE STICKY NAV BAR */

2. Next, you’ll need to set up your navigation. Here is a tutorial showing you how to create and style a basic navigation bar.

3. Find the code for your navigation code – this is could be in your template or in a gadget. Paste <sticknav> before it and </sticknav> after it.

<sticknav> 

(code for navigation)

</sticknav> 

4. The final step is to add a script to tell the bar to scroll. To do this go to Layout > Add Gadget > HTML/Javascript Gadget and paste the following.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    
var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){ if ($(window).scrollTop() > aboveHeight){ $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px'); } else { $('sticknav').removeClass('fixed').next().css('padding-top','0'); } }); }); </script>

5. The script presumes that your header is called header (see pink line). If the navigation is jumping replace

var aboveHeight = $('header').outerHeight();

with the following, adjust the value for the height your header is

var aboveHeight = 300;

TUTORIAL 3 – Fixed Pages Gadget

If you’re using Bloggers Pages gadget, you can simply add the following code to make it fixed to the top of the browser window. Go to Template > Edit HTML and add this code above ]]> </b:skin>

#PageList1 { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

The selector you use (#PageList1, #PageList2, .pagelist, etc) will depend on your template and how many PageList gadgets you’ve added.

How to Centre & Style the Navigation

To centre your navigation, add the following code above </b:skin> to Template > Edit HTML. For more styling code check out this basic navigation tutorial.

/* Centre Navigation */
.tabs .widget li, .tabs .widget li{ display: inline; float: none;} 

Some templates may need this instead

/* Centre Navigation */
.tabs .widget li, .tabs .widget li{ display: inline-block; float: none;} 

or this

/* Centre Navigation */
.tabs-inner .widget ul { text-align: center;} .tabs .widget li, .tabs .widget li {display: inline-block; float: none;} 

Gap above navigation

To remove Blogger navigation bar, go to Layout > NavBar and turn it off. You’ll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the following

body .navbar { height: 0px; } .content-inner { padding-top: 0px; }

Elements losing styling/CSS when moved above header

Occasionally, putting certain elements above the header will remove the CSS associated with it. Here’s a solution to that. In the layout tab drag your header, navigation and any other gadgets down a little. It will jump to the second level, this shouldn’t affect the look of your blog (as in it will still appear at the top) but it will keep the styling. This image will hopefully explain that better.

move-header gadget

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

351 comments

  1. Deepa on

    Hi Ellie,

    I tried your code. It did work but not as expected. What I want is the email box, categories and social icon line on my blog should only be fixed… exactly the way it is appearing on your page..
    when i tried your code it stick the blue line above my recent posts and that blue line scrolls..
    my blog address – http://famousgreatandbest.blogspot.com/
    please help.

    Reply
    • Ellie M on

      Hello, it’s hard to tell without having access to the code. You seem to have <sticknav> wrapped around multiple div, one of which (<div id="bottom-header">) is an empty and it is the one scrolling. Try juts wrapping it around <div id="searchbar">.

      Reply
      • Deepa on

        Hi Ellie,

        I tried and it did work to the extend that it stick at the top. However it is on the top irrespective of whether i am at top of middle or at the bottom of the page.

        How I want is – When on top of the page
        Recent Post
        Header Title
        Tabs
        Email Address, topics etc.

        When I scroll down
        I want only Email Address, topics tab should be sticky.
        How can I attain this?

        Reply
        • Ellie M on

          Is the email address, topics tab in a gadget or is it just part of your code. You need to wrap the code above just around this section, not the recent post, header, tabs, etc. The script will ensure that once you scroll past a certain part, that section will then stick. Without the script it will be fixed to the top regardless of where you are on the page, perhaps it is conflicting with another script.

          If you want you could add me to your blog so that I can have a closer look at your code. To do this, go to Settings > Basic and scroll down to the bottom. You’ll see a heading “Permissions”. Click “Add Author” and enter my ****@gmail[dot]com, click invite. Once accepted, please change the drop down from “author” to “admin”. This gives me the permission needed to access your template. I can then have a look at your setup and see if anything is conflicting.

          Reply
          • Deepa on

            Hi Ellie,

            I tried your code again today. And it worked perfectly. Do drop by and share your comments on how sticky bar is looking on my page

            http://famousgreatandall.blogspot.com/2013/10/celebrating-world-vegetarian-day-and.html

            I have one more question, when I added the javascript code in the layout and saved it. It properly saved the code. Then I tried to save arrangements, it is showing error “An error occurred. Please refresh the page and try again” Is something I am doing wrong.

            Nonetheless, code worked perfectly thought the save arrangement is giving error.

          • Ellie M on

            It’s fab! Once you edit something, it has to re-adjust the settings on the layout so by refreshing it updates to the changes you’ve just made. Thats all that was 🙂 x

  2. Mai on

    it worked but not the best.. i don’t understand this.. 🙁 it makes the navbar sticks, ok,but i still have the tabs with a grey background. and the navbar it’s white and without a thing. can you help me with that? you even understood that? haha
    this is my blog- http://stormia-fashion.blogspot.com/ i would appreciate it a lot if you would help me 🙂 thanks!

    Reply
  3. Beckie on

    Hi, I have tried this code and it worked for the most part – I still have to edit bits and bobs but that’s fine for now.
    My problem is, I want the bar to go the whole way across my page, but it only goes from the start of my blog on one side? Is there something I have missed?
    I have been trying it out on my test blog which is http://www.beckiestests.blogspot.com
    Thanks! I love your site!! x

    Reply
  4. Abigail on

    Hello! Thank you so much for the code! So helpful — it’s one of the only ones that has worked for me.

    I just had a question… my navbar is under my header & as soon as I scroll down, the navbar immediately sticks to the top. I love how your blog waits until you actually scroll past the navbar before it sticks to the top (I hope that made sense). Is there something I can tweak / add to the code so that occurs on my blog too?

    Thank you in advance! (:

    Reply
  5. Nicola Marleen on

    Hey there!

    First I like to say how much I love your page!! I really don’t know what I would do without it! Really it helped me so much to finally like the grafic design of my blog!!

    So lately I was trying to get to know html and first everything was looking great then I wanted to change something but now my navigation bar is so thick! I want it to be like the sticky one that comes up when you scroll ’cause this one looks perfect! A day ago it really didn’t look like that and I don’t know how I did that but well please take a look and tell me what I can do about it :)!!

    Thanks in advance! You are great!!

    xx Nicola

    http://www.alpenglowsummit.com

    Reply
    • Nicola Marleen on

      Okay I just changed the color and I found out that there was something written!! So I got it! Haha :)! Isn’t it always like that when you start asking a question you suddenly know the answer!! Crazy, but well sorry to bother you!

      You ara a great blogger! I’m so happy that I found your blog :)!!

      Thanks,

      xx Nicola

      Reply
  6. Maru on

    Thank you so much! This worked perfectly for me 😀 I just have one question, how can I add social media icons to that sticky navigation bar? I have mine at the very top of the page. I’ve been trying but I cant’ make it work, if you could help me that would be great!

    Thanks! 🙂

    Reply
  7. Priyanka on

    Hi Ellie,

    Thank’s so much for putting this up, your tutorials have been so helpful.
    I have a problem with my sticky navigation bar and was wondering if you knew the solution or could help me.
    The sticky part works perfectly, however the buttons only work when the bar is at the top of the page. So once the page is being scroll the buttons don’t work (they can’t be clicked).
    Thank you so much.

    Priyanka. X

    Reply
    • Ellie M on

      Hi lovely, you have an extra sticknav code in your template which is causing it not to work. Take a look at the code below which I took from your code (without your links). Notice the section in pink, you need to remove this. You’ll find this code above ]]> </b:skin> in Template > Edit HTML.

      <sticknav>
      <div id="navigationbar">
      <ul>YOUR LINK CODE IS HERE</ul></div>

      <sticknav>
      <!-- end navmenu --></sticknav>
      </sticknav>

      Reply
  8. Chelsea on

    Okay I’ve done everything (wonderful instructions, thank you!) however I can’t for the life of me find my navigation bar html code. As in step number 3. I can’t find it in a gadget nor in the template. Could you please help me ?

    Reply
  9. Majda on

    Hi! I’ve tried these codes three times now and I can’t seem to work it out at all! I don’t know what I’m doing wrong! Is there any way you can help?

    Reply
    • Ellie M on

      Of course. Where exactly are you running into trouble? You need to set up a navigation menu in a HTML/Javascript gadget and then add the sticky code around it. Have you gotten that far? I can take a look once you add the menu code to a gadget or you can hire me to instal it for you if you’d prefer.

      Reply
  10. Anne on

    Hi Ellie,

    Thank you for the helpful tutorial. I was able to add my sticky bar on my blog, but I can’t seem to get the buttons to align on the right side of my blog. I know I can adjust the margin, but is there another way to do this so it’ll look the same on any browser or monitor size? Can you please help?

    Thanks!

    Reply
    • Ellie M on

      To get them to align to the right of the bar, find .tabs-inner .widget ul and add text-align: right;. You will need to edit margin-right: -30px; to read margin-right: 0px;. I have loads of tutorials for navigation bars that you can combine with this tutorial, but the way you have it at the moment should be responsive 🙂 hope this helps x

      Reply
      • Anne on

        Oops, sorry! I meant to align to the LEFT side of my blog post. Like how your sticky nav bar is. It’s stretched out on both ends but the first tab is aligned to the left side of your blog post. I hope that makes more sense.

        Reply
        • Ellie M on

          Oh! To get it full width, find #navigationbar above ]]> </b:skin> in Template > Edit HTML. Change width: 940px; to width: 100%; and add left: 0px; before the close bracket. Then find .tabs-inner .widget ul and remove the margin-left and margin-right. Add padding: 0px 120px; and alter the value depending on the alignment with your content area.

          Reply
  11. Anne on

    Hi Ellie!

    I have another question.

    I added another div for my social media to float to the right. But the problem is, it’s overlapping with the links to the left. I want my text and image links to be aligned in the navigation bar. Can you please help again?

    Thanks in advance!

    x
    Anne

    Reply
    • Ellie M on

      There’s several ways to do this but a very easy way is just wrapping your social media icons in <div id="socialnav"> ... </div>, then adding #socialnav { text-align: right; } to your CSS above ]]> </b:skin>. Hope this helps x

      Reply
  12. Jana on

    I just tried this on my test blog for a design I’m helping a friend with and it worked almost all the way–the only problem is there is a little strip on the left side where the background color isn’t sticking and there is a little white block when I scroll. I’m not sure how to fix it. Help a sister out? To see what I’m talking about you can click here. Thanks in advance! 🙂

    Reply
    • Ellie M on

      Hello 🙂 I notice your background image has a green stripe at the top which is what you see when you scroll, this is why it appears that there is a white block but if we took away your blogs background image, we would see that the box doesn’t cover the full blog width. Here’s how to add a full width navigation so you don’t necessarily need that stripe in your background. I’ve added a height to .tabs-inner .widget ul to cover the background image so it’s a straight line but you can remove it if you want.

      First find #navigationbar and replace your code with the following

      #navigationbar {
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 999;
      width: 100%;
      }

      Next find .tabs-inner .widget ul and replace it with the following

      .tabs-inner .widget ul {
      background-color: #b2ddce;
      text-align: center;
      height: 37px; /* TO COVER BG IMG */
      }

      You should now have a full width navigation menu with the links centred. Let me know how this works for you.

      Reply
  13. Leigh on

    Hey thanks for the easy tutorial, two quick questions how do you get the links in the nav bar in the further along in the bar & also in the middle as they are near the bottom… and the second question when i scroll down the bar sticks but is behind everything instead of on top can you help me out please 🙂 thanks leigh xo

    Reply
    • Ellie M on

      Hello. Find #navigationbar and change the width value to 100%, z-index value to 999 and add a text align so that you code looks like this

      #navigationbar {
      left: 0px;
      position: fixed;
      top: 0px;
      z-index: 999;
      width: 100%;
      height: 300px;
      text-align: center;

      Then find or add .tabs .widget li, .tabs .widget li { in your CSS (before </b:skin>) and add display: inline; float: none; between the brackets.

      Reply
  14. Sarah on

    Great tutorial, the first one i could actually understand! I still cant manage to get it to work though, I think it could be my template I am Not sure! I already have a navigation bar fixed to the top of the page but i only want it to appear after I scroll past the nav bar under the blog title!?

    Reply
    • Ellie M on

      Okay it might not necessarily be your template, but you do have a lot of code in your CSS that could be messing things up. I notice you have three navigation bars, so choose one to work with and move it to under the header, wherever you want it to be when you first appear on your blog. Wrap it in the code above (step 3). You have the style code for the Sticky Navigation Bar about 17 times in your CSS, so remove 16 of them. Your top navigation bar is working, but it’s already placed at the top of your blog. If you prefer, I can instal it for you if you put through an order here.

      Reply
  15. Claire on

    This is so great – thank you! One question: my nav bar is above the title of my blog. The nav bar doesn’t show up until I scroll past the header. How can I get it to show up and stick at the very top of the page (before I scroll past the header)?
    Thank you!

    Reply
    • Ellie M on

      Hello! The problem is that you’re header is covering it. I’d recommend using the first method “make top navigation bar fixed/sticky” because you’re navigation is already on top. Of course you’ll use #NavMenu instead of #navigationbar so it will be #NavMenu { position: fixed; top: 0px; z-index: 999; width:100%;}. Then add text-align: center; to #NavMenuleft if you want it centred. The method you are using “sticky navigation bar when scrolling” is for when the navigation bar is under the header. You could just leave it as it is and find #NavMenu and add z-index: 999; between the brackets to make it show on top – but you may have extra work to fix the navigation position then and it will still “jump” as the script is telling the browser that it’s under the header.

      Reply
  16. Sara Mueller on

    Hi Ellie,

    Love your blog and tutorials. I am an aspiring graphic designer and I am learning so much. One thing, however, is that I couldn’t get the sticky nav bar to look like I want it. I want it to have a horizontal line on top and bottom of it when it scrolls and wasn’t able to that and I have tried several ways. much like it shows at the top when its not scrolling. Please help. Here’s the current way it looks:
    http://meetatthebarre.blogspot.com

    Thanks!

    Reply
  17. Morgan Andrews on

    Best tutorial ever. The navbar works now! Thanks 😉

    Oops. I have encountered an error. Error parsing XML, line 1384, column 3: The element type “sticknav” must be terminated by the matching end-tag “”. I can’t find what needs to be terminated. I have closed the sticknav tag already. Please help.

    Reply
  18. Shahel on

    iv tried this code but when i scroll down the menu is shifted to the right and can not bee seen also i like the fade in effect on the nav bar of your site how would i add that

    Reply
    • Ellie M on

      Remove border-bottom: 1px solid #eee; from .nav. Find sticknav in Template > Edit HTML and change it to sticknav { background: #ffffff; opacity: 0.95; height: 47px; width: 100%; margin: 0 auto; z-index: 9999; left: 0px; border-bottom: 1px solid #eee;} . My site is self hosted so I can do more with the code to fade it in, I’m looking into a work around way of adding that function to blogger.

      Reply
      • Shahel on

        Its centered now thanks! if you could also tell me how I can get it to stick after I’ve scrolled pass the nav not as soon as I scroll as it is doing so now, thanks.

        Reply
        • Ellie M on

          It used to work that way but the script seems to no longer be compatible with customised templates, I’m looking into an alternative but it’s something that is much more difficult to do on the Blogger platform. Will let you know when I have an update.

          Reply
  19. Jade on

    Hi!
    I’m currently creating a new blog layout and used this for my new navigation.
    What I am trying to do is center everything to the whole page…it’s been a while since I’ve done some coding haha.
    I added to the widget where you add (etc) which did work but, but when you scroll down it doesn’t stay aligned.
    The blog that I have is on private but if you need to see it I can add your email to the permission to read list, so let me know which email to use if you need to.
    Thanks so much for the tutorial/help,
    Jade

    Reply
      • Jade on

        Hi!! I added you~ Not sure if it sent you an email or not, so the link to the blog is testnewlayout1{dot}blogspot[dot]com
        I’m trying to use the fixed when scrolling but idk what I did to mess it up ahaha.
        Thanks again,
        -Jade

        Reply
        • Ellie M on

          Hello! Remove center tags around the navigation in the gadget in Layout, that’s throwing it off to the side. Then go to Template > Edit HTML and find #NavMenu. Change position: center; back to position: relative;, add text-align: center; between the brackets and change width to width:1000px;. Change the width under #NavMenuleft to be 1000px also. Find sticknav, change width to width: 1000px; and height to height: 40px;. That should solve it.

          Reply
  20. MadeByMeg on

    Ellie – I can’t believe how much time and effort you put in to responding to everyone’s requests! You should definitely add a PayPal tip jar 😉

    Since you’re so helpful, I do have a support question for you – I was pleasantly surprised to find that everything worked great the first time, except that the navbar tends to ‘jump’ once when I scroll down in Chrome (it doesn’t seem to happen in Firefox or when viewed through sites like Bloglovin). Wondering if you have any suggestions?


    (It’s a test site, so please ignore the hideous graphics.)

    Reply
    • Ellie M on

      Hello! You’ve added both codes which is why they are conflicting. The first part of the tutorial “make top navigation bar fixed/sticky” for for when the nag is already at the top and you just want to make it fixed. The second “sticky navigation bar when scrolling” is for when it’s under your header and you want it to stick when scrolling. This is what’s causing the jump.

      Go into the HTML Gadget for your navigation and delete the code for sticknav that you’ve wrapped around it, instead add <div id="navigationbar"> before your nav and </div> after it. Then go to Template > Edit HTML and find ]]> </b:skin>. Above this you’ll see the CSS for your sidebar, above that is your navigation code which has been aded multiple times #navigationbar { ... } sticknav { ... } .fixed { ... } #navigationbar { ... } sticknav { ... } .fixed { ... }

      Keep the first #navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;} but delete the rest. That should solve your problem 🙂 thank you for your kind words!

      Reply
  21. Sarah on

    Hi! your tutorials are awesome!

    I just want to ask how I can make the back ground a little bit transparent? I don’t want a totally transparent background just something a bit see-through (I hope you understand this!) I did your drop down tutorial and this tutorial on my test blog and its perfect! The only thing I really want to do now is to be able to make the background a bit transparent. I also want to ask why my menu bar seems to move a little bit off the center whenever I scroll down?

    my test blog is http://heyantoinette4.blogspot.com/

    Thank you! 🙂

    Reply
    • Ellie M on

      Hello, thank you so much! To change the opacity of the background, find sticknav in Template > Edit HTML > above ]]> </b:skin> and add opacity: 0.9; between the brackets. Alter the number anywhere between 0.0 (transparent) and 1.0 (opaque). I can’t get onto your test blog to check the code for why it’s moving? If you want to invite me ****@xomisse[dot]com to be a reader I can double check conflicting code for you.

      Reply
  22. Carol Patrício on

    Hi Ellie! This tutorial was really helpful, it was exactly what I was looking for! I have one little problem though and I would be so grateful if you could help me. I just want to center the links! It’s probably something simple that I’m missing… This is my blog http://www.desopilar.com. Thanks for your time and effort in these tutorials!

    Reply
    • Ellie M on

      Hello Carol, thank you so much. Add the following code above </b:skin> in Template > Edit HTML.

      /* Centre Navigation */ .tabs .widget li, .tabs .widget li{ display: inline; float: none;}

      Reply
        • Ellie M on

          Okay now add .tabs .widget li, .tabs .widget li { float: none !important; display: inline-block !important; } and then find the code for sticknav that you added and replace it with the following sticknav { background: #ffffff; height: 30px; width: 100%; margin-right: 0px; left: 0px; position: relative; text-align: center; z-index: 9999; }

          Reply
          • Xiaoyu on

            Omg it worked!! I got it to center but it still jumps a little I’m not sure if theres anything I can do about that.

            ** Thank you so much for responding I really really appreciate all the time you put in responding to your posts Ellie. You are awesome.

          • Ellie M on

            Awh thank you 🙂 happy to help. The reason it’s jumping is because you used the method sticky navigation bar when scrolling which is for when the navigation is under a header and then sticks once the user is scrolling. The script presumes that it needs to jump over that section. You currently have it positioned on top with nothing above it, so swap to the other method make top navigation bar fixed/sticky and that will stop the jump as it will stay fixed on top. Does that make sense?

  23. Elena on

    Hey! I tried adding the code to my site, but for some reason the sidebar widgets all moved to the bottom of the page instead of on the right side. When I remove the navigation bar it formats correctly, but I can’t figure out how to have the navigation and the sidebar.

    Thank you so much!

    Reply
    • Ellie M on

      Hello Elena. That’s very odd, I’ve never come across this before since the navigation is above the main content area it shouldn’t affect it. First thing I notice is that there’s wrongly added code which is cancelling some of your template. Find the gadget you added for navigation, at the bottom the <!-- end navmenu &# 8212;> should be <!-- end navmenu --> alter this and then I can have another look for you 🙂

      Reply
        • Elena on

          Also, do you know how I could get my navigation menu to match when it’s in place at the beginning and when scrolling?

          Currently, it’s centered when in place and when I scroll it’s more towards the left. I like the way it looks when scrolling, but I can’t get my regular navigation to match it (to move towards the left).

          Reply
          • Ellie M on

            It’s easier to match the scrolling with whats in place, but to do it the other way around you’re going to need to edit a couple of things. First, find ]]> </b:skin> in Template > Edit HTML > Format Template and add .region-inner.tabs-inner { max-width: 100%; } .tabs-inner .section { margin: 0px; } .tabs-inner { padding: 0px; } above it. This should be enough to move the navigation in place over the left in order for it to match the scrolling navigation.

  24. Brooke on

    Hi Ellie,

    I can’t seem to get the titles centered in my nav bar. I’d like them to be centered rather than aligned to the left. Thanks for your help, you provide such great tutorials!

    Reply
  25. Sarah on

    Hey ellie I have tried to apply your steps to the navigation bar that was already set up in my template(im not sure if its right). However i cant seem to find the to put in the entry. Is there anywhere else i can find it?

    Reply
    • Ellie M on

      Hello, you have HTML and Javascript code in your CSS which isn’t allowed and would cause errors. <sticknav> and </sticknav> are supposed to be wrapped around the code for your navigation, not to the CSS so remove those as well as <div id="fb-root"></div>
      <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>

      Reply
    • Ellie M on

      Hello. There’s two way to add your URLs, one is using full links and the other is adding the page link (the way you’ve done it for the about page p/about.html). Use the full link for the home page so otherwise it will presume it’s a page and add www.boldandink.com onto the end of your domain name 🙂

      Reply
        • Ellie M on

          Yes, remove the spaces from the code in the gadget and then add padding: 0px 40px; to .tabs .widget li, .tabs .widget li in your CSS 🙂 Add the code for the search box as part of the navigation as if it’s another link, wrap it in a div (put div tags around it) so that it can be positioned and styled like <div id='searchbox'>
          <form action='/search' id='search-form' method='get' target='_top'>
          <input id='search-text' name='q' placeholder='Search Blog' type='text'/>
          <button id='search-button' type='submit'><span>Search</span></button>
          </form>
          </div>
          . You could also add the search gadget to the top of your blog and re-position it. This is pretty handy tool for creating custom search boxes if thats something you’d like.

          Reply
  26. Tamara on

    Hey there!

    First of all – thank you so much for this tutorial – it is the best one I’ve found so far! However, I’m still having a few problems… I can’t get my bar to center on my blog. Also, the fonts don’t change when I enter a new font. Help!

    Thanks!!

    Reply
    • Ellie M on

      Hello. Because you added a basic navigation it’s reading CSS from Bloggers default tabs. To centre the navigation go to Template > Edit HTML and above /b:skin add /* Centre Navigation */ .tabs .widget li, .tabs .widget li{ display: inline; float: none;} . You should be able to change the font in the Template Designer (Template > Customised > Advanced) or manually by finding .tabs-inner .widget li a in Template > Edit HTML and above /b:skin.

      Reply
  27. Omar on

    Hi Ellie, thanks for this wonderful tutorial. So far, you have the most comprehensive and effective way of doing this one. I also implemented your tutorial on my blog but I’m having a little trouble.

    Sorry if I’m a bit of dummy in coding. My problem is that the navigation bar I set up is not showing as a horizontal list. I have put this navigation bar at a widget and have placed it below the header part in the “Layout” sections of Blogger. I’ll be grateful if you can help with this one. Thank you and more power! http://trendscooper.blogspot.com/

    Reply
    • Ellie M on

      Hello, which one are you trying to do? Something in your code may be conflicting with it, add ****@gmail.com to your blog permissions and I’ll have a closer look at your code to see if I can find the issue 🙂

      Reply
  28. Vanessa Eugine on

    thank you so much for this great tutorial! I used both this one and the tutorial for creating a drop menu and I just have 2 questions…

    1. How can I make the bar stretch across the entire screen?
    2. And for the drop menu… when I go over over the subcategories, the menu disappears… but when i scroll down the page where the bar sticks at the how, the the drop menu work perfectly fine.. .is there a way to fix this where the drop menu works all the time?

    thank you!

    http://iwriteaboutyou.blogspot.ca

    Reply
    • Ellie M on

      Hello, it’s due to the restriction on the height – find #NavMenu and change height: 20px; to height: 40px;. To make it full width find sticknav and change background to background: #fa0261; and change height to height: 40px;. Then find #nav and change border: 5px solid white; to border: 0px solid white;. If you want to add the border back add it to sticknav instead. For it to be full width before sticking, find #NavMenuleft and change width to width: 100%; and then follow this tutorial – Make header, navigation and footer full width in Blogger. Hope that helps!

      Reply
  29. Elise on

    Thanks so much for this tutorial! I’m having problems though. When I scroll, the bar sticks at the top, but it is blank and doesn’t have the tabs/pages. Do you know what I am doing wrong?

    Elise

    Reply
  30. Jule on

    Hey Ellie! Thank you for that amazing tutorial. It really worked but I have a little problem. When you go on my page and scroll down, the header jumps a little bit. When you scroll up it’s the same. I hope you know what I mean. What can I do? :(((( Sorry for my bad english :/ Love, Jule ♥

    Reply
    • Ellie M on

      Hello! It jumps because it thinks the navigation is below the header because you added both codes from above. If you want the navigation at the top and to scroll then remove everything under the heading “sticky navigation bar when scrolling” above.

      Reply
        • Ellie M on

          Hello. Since your navigation is already at the top of your blog you just need to complete the first part “make top navigation bar fixed/sticky”. Adding the code for “sticky navigation bar when scrolling” will make it jump if it’s already at the top of your blog.

          Reply
  31. Arul Frances on

    Hello Ellie,

    Its my pleasure to express my hearty thanks for the tutorial. It worked great for me.

    Thanks and Regards,
    Arul Frances

    Reply
  32. Tyler on

    Hey Ellie,
    I tried to do your tutorial but I’m having a problem with the navigation bar. It begins to scroll before it reaches the top of the browser window and it is below where it should be. I’m guessing it has something to do with margins. Any help would be greatly appreciated. 🙂

    Reply
  33. Samantha on

    Hi Ellie,

    I want to centre my navigation but I can’t seem to get it to work. I used both the different codes you supplied but they simple come up at the top of my blog as code and don’t effect the alignment of the navigation bar.
    I’ve pasted it above the <b> section but it doesn’t seem to be doing what’s supposed to.

    Am I doing something wrong?

    Thanks
    Sam xx

    Reply
    • Ellie M on

      Hello, if it’s appearing at the top of your blog it means the code is in the wrong place. Make sure you’re adding it above </b:skin> and not above <b:skin>.

      Reply
  34. Nayah on

    Hi and thanks a lot for the tutorial! but I’m having a little trouble. My nav bar is below my header and when I try to scroll down instead of scrolling it jumps straight to the top of the screen. Any suggestions?

    Reply
    • Elaine M on

      The script could be conflicting with other scripts on your site, double check what you are using. It could also be multiple calls for jquery so have a look for codes like <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>. The X’s will be the version, you’ll only need one of those in your template.

      Finally, you can increase the number value in the script for the scrolling navigation, the part that says .css('padding-top','60px');. Hope this helps.

      Reply
  35. Samiur on

    Hello Ellie, I used the first method. Its working but I have some problem with the header. The header that contains my blog name goes hidden under the top navigation bar and makes the header invisible.

    Reply
  36. Jess on

    Hi, thanks for this!

    Unfortunately I couldn’t center it (I tried both codes you provided and placed it right above the code), and when it scrolls it jumps to the left and the first word of my link is cut off.

    Help please! Thank you so much!

    Reply
  37. Keli on

    Hi Ellie,

    Thanks so much for your tutorial! Question: How do I change the color of the nav bar once it sticks to the top? I want it one color when it sits below the header, but another color once it sticks to the top of the page.

    Reply
  38. Pelayo on

    Hi! Following your instructions work mostly fine in my blog. After hours googling for a way of getting my menu sticky, this post gave me a very simple an effective way to do it. thanks a lot for your work and i´ll keep an eye on this web to keep tunin up things…
    Best regards!
    Pelayo

    Reply
  39. Stephanie on

    Hello, I am trying to get at the very least the navbar centered. I would like to justify the icons right and the menu left but I don’t think that’s possible since they are contained in the same list, either way, centered would be great!

    Thanks for your help!
    Stephanie

    Reply
    • Ellie M on

      You can split them and wrap the two in separate divs or lists. So for example <ul class="navleft"> navigation links </ul> <ul class="navright"> social media navigation links </ul> and then in your CSS add .navleft {float: left;} .navright {float:right;} to position them on either side.

      Reply
  40. jen on

    hi! thanks for the tutorial. I’m having some trouble though and not sure what to do next. I pasted all code that I was supposed to and for some reason my linkbar/navigation bar won’t stay fixed when I scroll. Can you please help or tell me what I’m doing wrong? thank you!

    Reply
    • Ellie M on

      Hello, you’ve placed <sticknav> and </sticknav> around your CSS for the navigation instead of wrapping it around the HTML code for the navigation. Since your navigation bar is already at the top of your blog, I recommend going for method 1 “Make top Navigation Bar fixed/sticky” in the tutorial instead.

      Reply
          • jen on

            ok, i’ve added the code in step 4 as well and my navigation bar is not fixed. i want it to stay at the top above my header when i scroll down my page. how come it isn’t working? am i missing a step? thanks for your help. 🙂

          • Ellie M on

            You’ve not wrapped the code provided around your navigation in your template/gadget. You added it again to the CSS, not the actual code in Template > Edit HTML or in Layout > Gadget.

          • jen on

            i don’t know how to edit the html then. what step am i missing? I’m under template. is there another place i need to click before i can input html? it worked as far as moving the linkbar above my header when i added code this way. am i supposed to click “edit template”? if so, it’s shaded grey and i am unable to click on it.

          • Ellie M on

            Okay, instead of editing the code manually – remove <div id="navigationbar"> and </div> from above ]]> </b:skin> and change navigationbar above ]]> </b:skin> to #LinkList1. Doing it this way means you’re going to have to play around with the styling to position it properly.

          • Ellie M on

            I can’t see that change in your code and you still have the div’s in your CSS. Can you add ****@gmail.com to your permissions under Blogger Settings and I’ll take a look for you.

    • Ellie M on

      Hello, you’re missing step 4 in Tutorial 1 “Make top navigation bar fixed/sticky”. You’ve also done the second tutorial “Sticky navigation bar when scrolling” which is conflicting so please remove that code.

      Reply
  41. Audrey Williams on

    Firstly, thank you for this guide and being so helpful! I feel absolutely lost.

    My issue is getting to that step 6 (I’ve skipped 1-5 because as step 6 says I am using Blogger’s pages gadget). In my HTML template I am not finding ]]> to copy the following code : .pagelist { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

    Is there a reason I can’t find the ]]> ?

    Thank you again. My blog is lululinden.com.

    Reply
    • Ellie M on

      Hello, I see you’ve since removed the code. I need to see it in order to check the code for errors as the code above includes a z-index so this shouldn’t happen.

      Reply
      • Audrey Williams on

        Hello! Again, thank you for being to speedy in replying. I’ve put the code back in so that you can check it out.

        *** Note:It seems that it works just fine in other browsers, just not internet explorer. Strange.

        Also, when I do add the sticky code, it reduces the space between my header and the nav bar (which I’d prefer it not to) so that they overlap slightly. I should add that I put in a code to remove an actual header and added an HTML image map code as the header.

        Reply
        • Ellie M on

          Hello lovely. I’m seeing the navigation scroll over the rest of your content. Are you still seeing it scroll behind? The overlap is because we’re sticking the navigation to the top so it’s pulling everything up a little. To stop the overlap when static add #HTML1 {margin-top:50px;} to your CSS (Template > Edit HTML > above ]]></b:skin>).

          Reply
  42. Lindsay on

    Hi xomisse,

    I can’t seem to get my navbar to stick to the top of my page. I skipped straight to step 6, pasted the code above ]]> and nothing changes. Help please?

    Thanks,
    Lindsay

    Reply
  43. Jules on

    Hey 🙂
    That’s a great tutorial, I’ve been searching quite long for something like this! So thanks a lot 😉
    It works fine for me expect one small problem… The navbar already sticks to the top when I start scrolling, not after it has passed the header (as it should, shouldn’t it?)
    Maybe you have a solution for this?

    Thanks,
    Jules

    Reply
    • Elaine M on

      Hello. The script could be conflicting with other scripts on your site, double check what you are using. It could also be multiple calls for jquery so have a look for codes like <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>. The X’s will be the version, you’ll only need one of those in your template.

      Finally, you can increase the number value in the script for the scrolling navigation, the part that says .css('padding-top','60px');. Hope this helps.

      Reply
  44. Rachel on

    Hi Ellie, this was so helpful! Thanks! I’m having a bit of trouble centring the navigation bar though, I’ve tried using both codes, but neither seem to work :-/ Any ideas?

    Reply
  45. Lindsay on

    Hi there. I have been having a blast looking at all the information you have on your site. I seem to be having difficulty getting the sticky navbar to center as well. I can’t seem to figure out what I did wrong. If you have any ideas let me know if it’s not too much of a hassle. I’ve left it up so you can see what I’m talking about. Thanks!

    Reply
    • Ellie M on

      Hello Lindsay, thanks so much! Go to Template > Edit HTML and in the CSS section find #navigationbar, add text-align: center; to before the closing bracket. That will centre it. There is also a problem with your code for the Navigation Bar so go to Layout and click edit on the gadget for your menu. You have there twice and <sticknav>. Remove <sticknav>, </sticknav>, one <div id="navigationbar"> and the very last </div>. Hope this helps 🙂

      Reply
  46. Jessica on

    I was wondering if there was a possibility to just add regular links to the nav bar, without them having to be a page/category/link on my own site. I want to link to my Pinterest, Facebook, etc. but without social media icons (mostly because I tried using your tutorial for doing so but could not get them to be in line with the nav bar no matter how many times I started over from the beginning 🙁 )

    Is there some code I could tweak to just use regular links?

    Thank you, your site is a godsend.

    Reply
    • Ellie M on

      Hello, thank you so much. Yes of course, you just add the link to the social media site instead of to a certain place on your blog. If you want to redo the tutorial with social media icons I can have a look and help you line them up.

      Reply
      • Jessica on

        When I add the links, it automatically makes it http://www.becomingjess.com/www.facebook.com etc. as if it is somewhere in my code associated specifically with my blog.

        However, I decided to give the social media buttons in the navbar another try and I’m not sure how I fixed it but it’s working! Now, I have a new question – is there a way I can have my actual links (ie: home, about, etc.) centered and then have the navright still aligned to the right?

        Thank you for getting back to me so quickly, I really appreciate it.

        Reply
        • Elaine M on

          Hello. You need to use the full link http://www...... otherwise it will attach to your blog link. Use the class navleft to centre the links and the class navright to float the icons to the right.

          Reply
  47. Cinthy on

    Hello there! Really thankful for all ur tutorials that I could learn about designing my own site. But I have a problem about the navbar. It sticked but when I scroll down the page, the navigation menu goes to left. Do u have any idea about whats wrong here?
    Thanks before.

    Reply
  48. Rebeca on

    First of all I am in love with this blog, it’s so helpful! But could you help me out Ellie? I followed all these steps but my navbar just won’t stick when you scroll down my blog…. 🙁

    Thanks!

    Reply
    • Ellie M on

      Hello, thank you so much! You’ve added the class to each link, which is why it’s not working. See step 1 under method 1, you need to put the code shown around your current navigation.

      Reply
  49. Matthew on

    Ellie, thanks for this! I just have one question. How do I get my nav bar to only span the width of my blog instead of the width of the entire screen? Thanks!

    Reply
  50. Marriah on

    I love this tutorial, but I can’t figure out how to separate my links. I’d like to have mine similar to yours, where some things are to the left and other links are to the right, but so far all I’ve managed to do is either have them all to the left or vertical. Please help!!

    Reply
  51. Beth on

    Thank you so much for this post. For some reason it is not quite working. There is just no change when I place the code. I am using the page widget and don’t understand why that step has different options for the codes? Thank you!xx

    Reply
    • Elaine Malone on

      Check your CSS for errors including missing or extra characters (semi-colons, brackets, etc), these could stop further CSS from working correctly. The pages widget is different because it’s a gadget and not a custom navigation, the different variations are to do with the different templates and edits people make to their Blogger blogs.

      Reply
  52. Tanya on

    Hey. Thank you so much for your tutorial. It worked perfectly!! I have a question: How do I put my text on the right like how you did yours on the navigation bar? I tried messing around with the code, but so far..no luck. I also have a problem with my Pinterest button, whenever I scroll down with my navigation bar, it goes in front of my navigation bar instead of behind it. I do not know if that makes any sense. I hope you can help!! THANK YOU!

    Reply
    • Elaine Malone on

      Hello, You have a couple of errors in your CSS including an extra bracket at the end, missing a close bracket from after .fixed { position:fixed; and have an extra semi-colon after the src url for .post-title:after. You can move the text to the right using text-align:right;, this post will explain more about positioning if adding multiple things to your navigation. As for the Pinterest button, it happens if the user hovers over an image before scrolling. If scrolling and then hover over image the pin it buttons appears behind the menu. There’s nothing you can do about it unfortunately, just the order of “use”.

      Reply
  53. CinthyKwok on

    Hi Ellie! I’ve tried ur code and it worked. But I want a bigger navigation just like this page –> songofstyle.com and when it scrolls, it has a bottom border and transparent. Do u have any idea how? Thanks! ^^

    Reply
    • Elaine Malone on

      Hello, firstly your navigation is at the very top of your blog so you should use the first tutorial above instead of the second. To make it bigger and transparent – adjust the padding and height values, add border-bottom: 1px solid #000000; and opacity: 0.9. That navigation doesn’t have a border though, it has a shadow using -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);.

      Reply
  54. Eloise on

    Hello Ellie, I seriously love your site, i just wish i had found it sooner! 🙂

    I seem to be having a few problems with my sticky bar on my blog. I’ve followed a few of your tutorials and i was wanting it like the second tutorial but it hasn’t seemed to have worked? I was wanting it also to have an opacity background yet when i add this in it’s not changing anything? also i have gadgets down the right side of my blog but for some reason it’s pushing everything to the footer of my blog yet under my layout it’s all saying it’s to the right? It seems to have stretched out my whole blog or something. Another issue I’m having is that on some of my pages the menu bar disappears completely
    what am i doing wrong? (obviously alot haha)

    Thanks 🙂 xx

    p.s. Sorry for hounding you with questions.

    Reply
    • Eloise on

      hi,sorry I’ve figured everything out apart from the menu bar stretching out my blog and moving my sidebar to the footer. I’m not really sure what’s happening there…

      Reply
  55. Regina @ Margarita Bloom on

    Your site has been so helpful! I had a few questions. How would I go about having the menu bar span the width of my blog instead of the width of the entire screen? I tried what you said above (Find #navigationbar and remove left: 0px;, then adjust the width value to 1110px) but it just made the menu bar go all the way to the right instead of being in the middle. What can I do?

    Also, how do I get that translucent look like you have on your menu bar? Does that only work on white menu bars or can it be used on black as well??

    One more question, I originally wanted a white menu bar and wanted a grey border on the bottom so it would pop when scrolling down my page if I had a white background…I’ve tried just about every stinking border code with no luck except to get borders around the menu buttons which I don’t want. lol.. How would I do that?

    Eek, just one more question. I promise!! I was thinking of putting a background on my blog but when I go to put it on it only covers from the header down leaving the top header part white? How would I make it so the background is completely covering the whole…well background? Thank you SO much! I could never have made that menu bar without your awesome website. You’re a life saver. 🙂

    Reply
    • Elaine M on

      Hey! You’ll also need to center it, the code will depend on your template but first try by adding margin:0 auto;. To make it translucent you can use this tutorial, you can use it on any colour. You can use border-bottom: 1px solid #666; instead or a drop shadow. It would depend on your template but if there is a background colour on the header section you would have to remove that in the CSS.

      Reply
  56. Cheryl on

    Hi, Ellie! This is amazing. I have just subscribed to your site. The fact that you take the time to respond to your readers is so admirable.

    I took the time to go through every single question to make sure I didn’t ask it again. I have two navigation bars (ignore the third it will be deleted once I fix this). One is to be fixed at the top (which it does and works fine). The second one is underneath my header and shouldn’t stick to the bottom of the first navigation bar until the page reaches the bottom of my header. I used your second option for this navigation bar since I don’t want it stuck at the top from the start.

    However, as soon as I start scrolling it sticks to the top. It won’t scroll to the bottom of the header to start scrolling. So, I went back and increased the padding 60px on the script, but nothing happened. Is there anything you can suggest? Honestly, any feedback will be extremely helpful. I’ve been at this for 3 days!

    Reply
    • Elaine M on

      Hey Cheryl, thank you so much! I’m so sorry that it’s taken so long to get back to you. I’ve updated the post (step 5) to show you a solution, I hope it helps. Please let me know and I promise I won’t be so long to reply! Hope you had a lovely weekend.

      Reply
  57. Katie Holman on

    Thank you SO much for the tutorial!
    It works great, but I think that in implementing it, it somehow kicked my header image off-center to the right, so it no longer lines up with the posts’ edge.
    I’ve tried to look at padding and margin values but I just don’t know enough to sort it out. Do you have any idea what may have caused this?

    Thanks a million!

    Reply
    • Elaine M on

      Hello, it shouldn’t affect your header unless when adding the CSS you created an error, check over the CSS before the code you added and make sure it’s properly written and closed.

      Reply
  58. Kami on

    Hi i have a problem with your bar ! The bar is displaying I cant fix the space between tabs and it doesnt look like your example!
    Can you help me please?

    Reply
  59. Imola on

    Hi Ellie,

    Very informative, thank you! I am still in the works of creating my blog and find your tutorials vey helpful. However, I’m not sure why, but I can’t seem to get my navigation bar to stick. I have read and re-read the directions and cannot seem to figure out the problem. I did download a custom template so maybe there is something in the coding? Not quite sure. Any help or advice would be greatly appreciate!

    Thanks so much!

    Reply
    • Elaine M on

      Hello, make sure you’re wrapping the navigation in the correct code. Double check that there aren’t any errors in your CSS otherwise the CSS for this will not be read correctly. Hope this helps.

      Reply
  60. Anna on

    Hi Ellie,
    I’m trying to use the sticky bar option but it keeps jumping – I’ve tried changing the piece of code you suggest modifying to say the size of my header, but for some reason I am having no luck in preventing the jumping… is there any advice you have for this one?
    All the best
    Anna

    Reply
  61. Marcus on

    Hi,

    When my sticky navbar is scrolled down, there is a white part sticking out to the right, do you know how i may remove it?

    Thanks

    Reply
  62. elza on

    such a great tutorial, everything seems to be working for me perfectly until I try to make my navigation thicker ? it just doesn’t seem to work even though I feel like I’ve tried every code ahaha ! 🙁

    Reply
  63. Ali on

    This tutorial was SO helpful to me while making a sticky nav for my blog. I really appreciate you writing this! I do have a problem, though. And I have tried to troubleshoot it so many ways, and none work. I’d like the text in my navigation bar to be centered. You can see it here: AccordingtoAli.com.

    Any advice?

    Thanks!

    Reply
    • Elaine M on

      Hello, should be the same as the instructions at the end of post only with your custom selectoers – .sticky-menu nav ul {text-align:center;} .sticky-menu nav li {float: none; display: inline-block;}

      Reply
  64. Esra on

    The menu sticks to the left side when I scroll down. How can I center it?

    (I’m so sorry maybe they asked this question million times but I couldn’t find a solution. Can you explain it with a simple language? I’m new with Blogger.)

    Reply
  65. Esra on

    Hi again!

    I don’t know how to explain this (English is not my first language) but I want to take the fixed menu a little higher… What should I do?

    Reply
  66. Sophie anderson on

    I was able to center the pages under my title, but when I you scroll down, the navbar goes back to the original position (left). I tried editing the margin-left and left codes in the step 1 of the sticky navbar tutorial, but nothing worked! I was also wondering how can you put your image next to the navbar like yours?

    Reply
    • Elaine M on

      Hello Sophie, this is what you should have to make both navigation menu centred .tabs .widget li {margin: 0 auto; display: inline-block; float: none;} #navigationbar {text-align: center;} sticknav {background: #ffffff; height: 30px; width: 100%; right: 0px; left: 0px; position: relative; z-index: 9999; }. To add your logo to just the sticky navigation you’ll need a secondary navigation where you add an image tag (explained here) or text like I have done and then reposition it to the side.

      Reply
  67. Breanne on

    Hi there!

    First off, I love your blog! So helpful.

    I’m having some trouble adding a sticky navigation bar to my blog and was hoping you could help me. I’ve been blogging since 2009 and I feel like my code is a hot mess. First off, I have absolutely no “Tab” section in my css, so when I add the code about changing the tab colours, etc, nothing happens for my navigation bar. I believe I correctly completed the other steps, so the links are at the top and are sticky, but I can’t actually figure out how to change any of the colours or background colours in this section.

    Also, there is no Tab section in the Customize -> Advanced section of my blogger. Eek!

    x
    Breanne

    Reply
    • Elaine M on

      Hello Breanna. The tutorial describes the process for the default Blogger templates, if you have a custom template (sounds like you do if there’s no CSS for Blogger Tabs or changes don’t take effect in the Template Designer) then the code used will be slightly different and the CSS will have to manually be added for your template. I hope this helps.

      Reply
  68. Yapo on

    thank you so much for these tutorials <3 I was finally able to sort everything out and now it works properly~ cant be more proud of myself tbh hehe all thanks to you!

    Reply
  69. Ashley on

    Thank you for the tutorial and for including how to do it with Blogger pages! I was successful in using the code, but still have little white spaces between the tabs. Any advice? Thank you!

    Reply
  70. Stephanie on

    Hello Misse! Love your blog! Your tutorials are always so clean and easy to follow.

    I followed the steps in tutorial 2 and in the preview it works like a charm. But once I Save and view it live, it doesn’t show up at all. I checked and CSS and all is good, but the “Add the HTML/Javascript gadget” keeps disappearing from my blog layout. Has this happened before?

    Reply
    • Elaine M on

      Hello, thank you. Make sure to save the HTML gadget and then save the layout before switching to view the blog live. You could also add it directly to your template instead of adding it to a gadget.

      Reply
      • Stephanie on

        Yeah, I did those steps. Still disappeared. But I can’t believe I didn’t think to just go ahead and add it to my template!

        Thanks for the tips! You’re my favorite go-to! (I’ll be linking your blog to know you provide a wide variety of great tutorials & tips!

        Reply
  71. sHARLEEN on

    Hello,
    I have ran into some problems while trying to fix my navigation bar.
    I followed your tutorials (which are btw really helpful!) to make a sticky nav bar which has no space at the top and even customised it.

    However, I realised that I wanted to make a dropdown menu, and looked at your other tutorial. While I was doing that, I might have accidentally deleted or changed something as my menu became vertical and it was no longer 100%wide at the top and there was also an awkward gap (used to be the blogger bar).
    Could you help me to see where the problem is?

    My blog is: http://www.singingspikes.blogspot.sg

    Thank you so much, your blog is really aesthetically pleasing and inspirational. 🙂
    Love from Singapore,
    Sharleen.

    Reply
    • Elaine M on

      Hello, go to Layout and edit the HTML gadget that has your navigation. Make sure you are in “Edit HTML” mode and not “Rich Text” mode. Remove all the <br> present in the code, these are break spaces which are making each item appear on a new line.

      Reply
  72. Julie (xfallenmoon) on

    Hi Elaine! I was wondering, is this code going to give me something similar to what you currently have for navigation at the top of this blog? That’s kind of what I’m looking for. I want a bar at the top which reappears as you scroll down with more options.

    Reply
    • Elaine M on

      Hey Julie, no not those exact steps but if you slightly adjust it then yes. To achieve a secondary navigation you can use the tutorial above for sticky navigation and hide it on load, that way it only appears after it’s passed a certain distance 🙂 so basically you’ll have two navigations, one at the top and a hidden one that appears on scroll.

      Reply
  73. Melissa on

    I’ve been trying out new designs on a temporary website before I put it live on my real blog, I’ve been able to initiate the fixed navigation fine but once I do, part of my content shifts up to where you can’t see it regardless of how much you try to scroll. Have I done something wrong or are there some padding options that might fix this?

    Reply
  74. KIERA on

    First, I love, love, LOVE your fast responses to questions and tutorials. Honestly, you’ve inspired me so much I’m going to college for computer science in July, and I hope to pay it forward one day! You’ve been a huge game changer for me.

    Anyway… I hope this is a really easy question to answer, but how do I make it shorter? I’ve adjusted the height in the CSS (as well as a few other crazy ‘tricks’ from around the web), but it’s done nothing and I feel like my blog is being swallowed. If you have an answer, I would appreciate it so much. (:

    Reply
    • Elaine M on

      Hey Kiera! Awh thank you, you’re so sweet. Oh wow, that’s awesome! My brother is in his third year of computer science and he loves it. I hope you do too, best of luck!!

      Have a look for .tabs-inner .widget li a and reduce the padding value for it. It will reduce the amount of space around the link which is adding to the height of the navigation. Hope that helps!

      Reply
  75. Kristin Fields on

    My navbar is currently set up using images instead of text. Is it still possible to make it static when scrolling? I’m guessing since the bar itself isn’t currently styled with a background (it just takes advantage of the already white background) that it would need to be further styled in order for this to work? I know just enough HTML to be dangerous and usually find my own “work around” so it’s highly likely that the way I currently have it set up might be problematic!

    Reply
    • Elaine M on

      Hello Kristin, yes of course! The fixed position is added to the navigation container, if you use tutorial 1 or tutorial 3 you’ll just need to add a background to that simply by adding background: #fff; between the brackets.

      Reply
  76. Jessie on

    I have used several of your tips to customize my nav bar and header. Now I’m having a problem with the header having extra padding or margins on the top and left side, throwing it off center. Can you help me find the problem? I’ve changed every margin, padding and alignment # but nothing has fixed it. Thanks!

    Reply
  77. Kirsty on

    Hi there, thank you so much for this! I’m having a few problems getting my nav bar to be centred, my website is http://www.havethetown.com. Any help would be very appreciated! I don’t know if I’m maybe pasting it in the wrong place, should it be directly should the be on a new paragraph below like this :

    /* END XOMISSE STICKY NAV BAR */
    }]]>
    /* Centre Navigation */
    .tabs .widget li, .tabs .widget li{ display: inline-block; float: none;}

    Thanks!! 🙂

    Reply
    • Elaine M on

      Hello Kirsty. You have an extra } right above ]]> </b:skin> so firstly remove that and make sure there’s no other erros in your CSS (extra / missing characters, missing values, etc). Then paste #navigationbar {text-align:center;} .tabs .widget li, .tabs .widget li{ display: inline-block; float: none;} right above ]]> </b:skin> and it should centre for you.

      Reply
      • Kirsty on

        That’s it sorted, thank you so much for all your help, I think it’s great that you reply to everyone..even years later! 🙂

        Reply
        • Elaine M on

          Perfect 🙂 Awh thank you, can get a little difficult sometimes but I slowly make my way through them. I’ve just realised how old this post is, that is crazy!!

          Reply
    • Elaine M on

      Hello. Move the #navigationbar div out of the ul tag, it should be wrapped around it not inside it. Then change left:100px; back to left:0px; on #navigationbar and add a background to #navigationbar. Find .menu and add padding-left:100px; to it.

      Reply
  78. NINDY on

    Hi,

    I use Pages feature on Blogger and applied your codes for that setting, but it didn’t work 🙁 Can you help me on this? Thanks 🙂

    Reply
  79. Sarah on

    I just wanted to say that I love your site. 🙂
    You explain everything so simply and I find it super easy to follow. Thank you for these tutorials!

    Reply
  80. Karin on

    Hi there :),
    Thank you so much for this blog. I absolutly love it.
    I’ve followed this tutorial and it works perfectly fine but the navigation is now transparent yet the drop down menu is in the original colour. How can change the colour of the navigation bar?

    Reply
  81. hemali on

    Hi,
    Im a bit stuck, could you please help. I’ve managed to get drop down menu to start working but Im not sure what code I should use to get it to stay fixed.
    My navigation bar is a ‘HTML/JavaScript’ made when adding a Gadget.
    Your blog has been really helpful when designing other bits of my blog, thank you for spending so much time and effort into helping others!:)

    Lavenders Key

    Reply
  82. Maliha on

    Thanks a lot. Was looking for a way to do it… it was so easy to implement! Thanks tons again. I have it running on my blogger right now (feel free to check it out on the link)!
    Thanks a bunch once again!

    Reply
  83. tanya on

    I used the Pages Widget in Blogger and used your code to fix it to the top of my blog. However, even if I turn off navbar and add you code for the gap – I still have the space. If I fix it using a negative value for the Pagelist position top it looks right in my browser on my computer but is hidden on my phone when viewed. Please help!

    Reply
    • Elaine M on

      Hello. The gap is because it’s not the top gadget in the tabs section of your layout tab, so it’s taking the margin value for a widget. To fix this add margin: 0px; to #PageList1 and revert the negative value back to the original value. Hope this helps!

      Reply
  84. Erin on

    Hello Elaine!

    How do I center my sticky PageList and have it span the entire horizontal length of the screen? It currently is centered, but does not fill the entire length of the screen. Once I make this change, how do I maintain this formatting as a user scrolls? Currently, it is centered when arriving on the page, but then centers with the post when scrolling. Thank you for your help!

    blog: http://www.alwayserin.com

    Reply
    • Elaine M on

      If it’s a fixed pagelist – add your styling (background, width, etc) to #PageList1 in the CSS (tutorial 3). If it’s a sticky panelist, add the CSS styling you have for the panelist to the sticknav selector in the CSS (tutorial 2 step 1).

      Reply
  85. Mark Schauer on

    Hi — This code works great, but there are a few things that I’d like changed.
    First, when I scroll down to the top of the navigation, the bar enables too soon: I want to be able to scroll down to at least the header before it enables. For example, before the top of the browser reaches my home button, it activates. It’s close, but I want it to be closer.

    Second, since my nav bar only takes up only a portion of my blog initally, I was wondering if it could be centered and then span out in animation style to fit the width of the screen. I saw an example of this elsewhere, but I can’t recall it. This isn’t urgent, just a question.

    Third, I have a red bar below my navigation that keeps it flush with the template. It doesn’t get grabbed on the navigation bar when it gets fixed and it looks a bit off. I’m wondering if there’s a way to replace it.

    Last. I have a search bar on my navigation bar. The magnifying glass disappears when I scroll down and I’d like to keep it.

    Thanks in advance for your help!

    Reply
    • Elaine M on

      Hello Mark. Steps for changing the scroll activation are shown in step 5. You can use animations for the width. You can add it to the sticknav directly using CSS, it’s just a bottom border. The icon will have to be included in the navigation items, and wrapped with the sticknav tags.

      Reply
      • Mark Schauer on

        Thanks, I actually noticed the scroll activation shortly after I commented! And I added the bottom border, it’s looking great. I now have to figure out how to add the search icon and then I’ll be set, but that sounds difficult the way you put it.

        The animation, as I would like to have, also seems rather complicated. I only have minimal HTML and CSS experience (self-taught) so it’ll take a lot of tinkering to figure it out fully.

        Animation aside, is it possible to prevent the navigation bar from moving the links to the sides of the screen and keep them put? So when I scroll down, the nav-bar appears but all of the links are in the same place as they were, but there’s just a red border spanning the width of the screen? I’ve tried the center scripts posted above but they don’t seem to work.

        Once again, thanks in advance!

        Reply
      • Mark Schauer on

        Animation aside again, I’ve got my navigation bar sticky as I would like it: in the same place. However, there is minor padding to the left of the home button that is lost when it turns fixed. Is there a way to put that back? The search button is also wrapped in but it’s not displaying. If I can get these two fixed I won’t need the animation, although it would be a cool thing to have, but it seems too complicated.

        Reply
  86. Aideen on

    hi,
    brilliant tutorial as always. I’ve created my whole blog based on your posts, so as soon as I’m up and ready there will of course be a post to credit you and say thank you! I normally have no problem implementing the instructions given in your posts but for some reason I can’t seem to get this to work. Is it because I have a drop down element to my navigation bar? It stuck before that but I put the drop down code in earlier today and have just noticed that my navigation bar no longer sticks to the top of the page when you scroll down as it used to before. Is it clear to you what I may have done wrong? Thank you for taking the time to read this 🙂

    Reply
    • Elaine Malone on

      Hi Aideen, thank you so much. I’m sorry about the delayed response, my website was offline for a few months but back now. I’m not seeing the code for the sticky navigation wrapped around your current drop-down navigation or the CSS in your CSS section, this will need to be added in in order to work properly. Did you maybe remove it when adding the drop-down?

      Reply
  87. Julia Kim on

    Hi Elane! Is there a way a blogger blog can make the tabs stay centered to the left and right of the header image? ex- tab | tab | tab HEADER IMAGE tab | tab | tab

    Reply
  88. Kristy on

    This is very helpful. Thank you. Can you tell me how to add a black 1px border to the bottom of the navigation bar that will span across the full browser window?
    Thanks!

    Reply
    • Elaine M on

      Hey Kristy, add border-bottom: 1px solid #000; to your CSS using the navigations parent ID / class as the selector. If using method one this would be #navigationbar {border-bottom: 1px solid #000;}

      Reply
  89. Its Miss Ivana on

    Hi, first of all I want to thank you for all the amazing tutorials! Most of html things I have learned from you! I am editing my design at the moment at night time so that my viewers don’t see the mess on my blog and I have managed to do this(right now you cannon see it on my blog because at day time I am using my soon-to-be-old-template) but as you can see on my blog, on my dropdown menu under Beauty I have-Makeup, Hair, Nails, Face&Skincare tabs. When I put them on this tutorial, they are not under Beauty, but next to them. Do you know how to fix it? Is there any way at all? I hope that I have explained that well, thank you.

    Reply
    • Its Miss Ivana on

      Oh and one more thing- I have done this stip but cannot remember and find (even though I wrote it in my search bar) where to put this:

      (code for navigation)

      . On what code do you mean? On code from the step 1 or? Excuse if there are to many questions. You are the best, tnx!

      Reply
    • Elaine M on

      Hello, it’s an issue with the CSS. Have you added the CSS shown above? Is it in the correct place? If so then it is not being read correctly probably due to an error. Are there errors within your CSS such as extra / missing characters? Have a look through the CSS in Template > Edit HTML and correct any errors, it should work then.

      Reply
  90. Julie on

    Hi Ellie,
    thanks a lot for this easy tutorial and code! It’s awesome and it worked like a charm for me.
    But I’ve got one question… I tried to make the sticky navbar look different than when it’s not scrolling. So, for example when it sticks to the top, I want the background to be black and the font color white. When it’s under the header, the font is black on grey.
    How could I change that?
    xx Julie

    Reply
  91. Judit on

    Hello Ellie,

    Great tutorial, I love everything you show on your website, really useful.
    I have installed the sticky navigation bar with some icons and a link, but what I want is for them to show when I scroll pass the header, and disappear if I scroll up again, not for them to stay in the widget position when the page is loaded (I don’t know if I explained myself).

    Thank you so much!

    Reply
    • Elaine M on

      Hey Judit, thank you so much. Like a secondary navigation – to show on scroll and be hidden otherwise? You can hide the navigation in the CSS and then tweak the script to change it to visible upon scroll.

      Reply
  92. Zara TracesOfPolish on

    Hi!
    First of all a big thank you for your great blog! It has helped me so much when redesigning my blog , I’ve used a combination of tutorials from you to upgrade my layout.
    Like most other that chose to comment, I’m afraid I also have a slight issue with my implementation. I’ve combined this tutorial with the one adding social media icons to the menu. My menu looks great when I’m at the top of the page (menu to the left, icons to the right but not further out than my blog width of 1070px) , however as soon as I start scrolling, the menu moves as far left as the monitor allows and the social media icons does the opposite. I managed to move them inwards using padding-left and -right, but this won’t really adjust to different monitor sizes. Any idea how to make my menu+icons stay within the blog width?
    Thanks in advance!

    Reply
  93. Nathalie on

    Hi there! Wonderful tutorial 🙂

    I was wondering if there is any way to make the fixed navigationbar in tutorial 1 un-fixed! I want it to scroll with the rest of the page but don’t know what to change in the code in order to make it happen. This is the only navigationbar I could find that was still above the header and not below it.

    Thank you xx

    Reply
  94. Jennifer Verroi on

    This worked great! I just have an issue when I try to give the navbar a background. There is a transparent space about the links that I cannot for the life of me get rid of. I have left the entire bar transparent for now so it doesn’t look weird. How can I get the entire background of the navbar to fill with the color that I desire?

    Reply
  95. duni.cheri on

    Hello dear Elaine! 🙂

    thank you so much for your great tutorial! you saved me a lot of time 🙂 I have just a short question, I hope you can help me! 🙂 I implemented everything as you said and it worked perfectly.

    My problem: The sticky-navi isn’t smooth. It jumps to soon at the top and I would like to add a smooth effect. Do you know how I can solve this? :/ Would be so great <3

    Reply
      • duni.cheri on

        Oh wow – thank you so much for your fast reply! It helped, You’re the best 🙂 I don’t know If you could me with another little bug (which really stresses me out at the moment :D) When the stickynavi appears, the menue takes always a little bumb to the left and I dont’ know why… maybe you know what I can do? Thank you so much for your help <3

        Reply
  96. J Annie on

    Hello! Thank you so much for this tutorial!!!

    I was hoping you could help me out with my sticky navbar – it looks centered and great in Safari but pushed to the left in Chrome and Firefox. I was hoping that every browser would display it centered. Do you know how I could solve this? Thank you! ♡

    (I apologize if you’ve already answered this question here!)

    Reply
    • Elaine Malone on

      Hi, the location of your navigation menu will depend on your Blogger template (if it is a default, pre-made or custom template), if you do not have a navigation menu you’ll need to add one first 🙂

      Reply
  97. Natalie on

    Hello I must have done something and now my navigation bar goes down the length of my page and not across the top! I cant figure out how to fix it please help!!

    Reply
    • Elaine Malone on

      Hi Natalie, looks like you opened the gadget in Rich Text mode instead of HTML mode (there’s a text link on the right of the edit gadget popup to switch between the two). There are a number of line breaks (shown as <br> or <br />) in between the list items, these will need to be removed.

      Reply
  98. Victoria Huntington on

    My question was how do I add the Instagram widget at the bottom of my blogspot blog? I like how your IG photos are at the bottom of this blog. Anyway, would you be willing to do a tutorial on this? Thanks!

    Reply
  99. Alicja on

    Thank you so much for this tutorial! I’ve done this ”menu” a while ago. I have problem with it, please help. 🙂 I would like to have a navbar under header that jumps to top (to become sticky) after scrolling. I’ve tried everything 🙁

    I’ve done this navbar using ”PageList”.

    Reply
  100. D on

    Hello,
    I have been trying to use your code so that my site can have a stick navigation but seems ot to be applied please I need your help.
    Best Regard,
    D

    Reply
    • Elaine Malone on

      Hello, you have a couple of errors in your CSS along with HTML in that section which needs to be removed. The sticknsav tags in tutorial 2 need to wrap around your navigation, not be in the CSS. Hope that helps.

      Reply
  101. Ishi Prende on

    Hey Ellie,

    first of all thanks for this tutorial. Really saved me some time cause I was unable to get this working by myself.

    I’m sure you already answered this question but the comments are way to much to go through all of them. My Probelm :

    As soon as I scroll down the navigation bar sticks to the left side of the screen. So it’s not centered anymore. I’ve edited some values but as soon as I switch resolutions (i.e. 1650×1080 to 1920×1080) it’s off again. Is there any way to make it centered no matter what resolution you’re using?

    kind regards,

    Ishi

    Reply