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

Post last updated:

372 responses to “Create a sticky or fixed navigation when scrolling on Blogger”

  1. Oh this is so cool!! Thanks for sharing!!

    caughtinvogue.blogspot.com

  2. 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.

    1. 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">.

      1. 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?

        1. 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.

          1. 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.

          2. 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

  3. 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!

    1. omg, i understand that by myself! haha 🙂 thanks for the code it worked for me!

  4. Beckie

    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

    1. Thank you 🙂 if you go back to #navigationbar and add left: 0px; underneath it it will align it properly for you, it seems to be there be hasn’t got a value.

      1. Beckie

        Thank you!! Yes, probably my fault ha! is there a way that I could make it so that the links don’t start until further into the bar? Rather than at the beginning?

        1. Beckie

          Also (sorry for so many Qs!), is it possible for me to align things to the right of the bar? I want some links on one side and some social network buttons on the opposite side! thanks!

          1. Yes simply add the new elements within the code, wrap in a div tag and style it how you want 🙂

        2. Yes you can play with the padding/margin values for .tabs .widget li, .tabs .widget li to move the links as show in this tutorial – http://xomisse.com/blog/tutorial-create-a-basic-navigation-menu-in-blogger/

  5. Abigail

    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! (:

    1. It’s mostly to do with how fast your blog loads, you can alter the padding-top','60px' value in the script depending on how big your header is.

  6. 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

    1. 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

      1. Awh thank you, glad you got it sorted. Yes, always happens me – just as I’m about to give up, I figure it out! x

  7. You are amazing!!!!!

    xE

  8. 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! 🙂

    1. Yes of course you can, just add them to the widget before the end of the code. You can either wrap them in a div and add them before </sticknav> or add them as part of the list. Let me know if you need further help.

      1. Yeiii it worked! Thank you so much Ellie, you are the best! 🙂

  9. 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

    1. 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>

  10. Chelsea

    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 ?

    1. Hello. It is wherever you set it up in step number 2

  11. 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?

    1. 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.

  12. 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!

    1. 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

      1. 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.

        1. 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.

  13. 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

    1. 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

  14. Jana

    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! 🙂

    1. 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.

  15. Hello! This is a great tutorial – thank you for sharing! Is there a way of doing a fixed navigation on wordpress? Thank you 🙂

    1. Hello! Are you self hosted wordpress or wordpress.com? What theme are you using? It is possible, but the method varies depending on the theme 🙂 x

  16. Leigh

    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

    1. 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.

      1. Leigh

        Yay thanks so much!!! i hate to be even more of a pain but another question is there a way of make the nav bar thicker?

        1. No problem lovely. Yes, you can edit the height value for .tabs-inner .widget ul 🙂

  17. Sarah

    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!?

    1. 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.

  18. 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!

    1. 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.

      1. Thank you so much! Seriously all of your great tutorials are super helpful and you’re so nice to respond! 🙂

        1. Awh no problem lovely 🙂 glad you like the blog xx

  19. 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!

    1. Hello! Thank you so much, glad you find my blog helpful. Replace your #navigationbar code with the following

      #navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width: 100%; padding: 5px 0px; border-top: 2px solid #fd93f3; border-bottom: 2px solid #fd93f3; }

      1. Thanks a bunch! You should put a paypal donation box! You are so helpful and gooood!

        xo,
        Sara

        1. Awh thanks Sara, happy to help 🙂 x

  20. Morgan Andrews

    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.

    1. Hello Morgan. Thank you very much 🙂 I see the sticky menu works now so I presume you solved it?

  21. 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

    1. 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.

      1. 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.

        1. 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.

  22. 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

    1. Hello, which are you using – the fixed to top or fixed when scrolling? Yes I’d love to have a look and check the code.

      1. 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

        1. 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.

  23. 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.)

    1. 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!

      1. You are an angel! Worked like a charm and fixed another related problem I was having 🙂 Thank you!

        1. Awh thank you lovely 🙂

  24. 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! 🙂

    1. 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.

  25. 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!

    1. 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;}

  26. Hi Ellie, I’ve got the navbar working but the actual links wont connect to the pages. I’m sure it’s something simple but I can’t quite work it out!! My blog is http://www.lucycole.blogspot.com

    Thank you xx

    1. You seem to be using the wrong links. Go into pages, click view for each page, copy the entire URL and paste it into your navigation 🙂

  27. Xiaoyu

    Ellie,

    I have been through the tutorial and i have tried all of the things you posted but i still can’t get my nav bar centered. my blog link is http://www.boldandink.com Thank you so much.

    1. Hello! Add text-align: center; to .tabs-inner .widget ul 🙂

      1. Xiaoyu

        Hi Ellie,

        I tried what you said to do and it still isn’t working. I also can’t get it to stop jumping when I scroll down.

        1. 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; }

          1. Xiaoyu

            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.

          2. 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?

  28. Abdul Samad

    Oh very nice I really need this thanks for this 😀

  29. 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!

    1. 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 🙂

      1. That fixed it! You are absolutely amazing! Thank you so much!!!

        1. Ah perfect! Aw thank you 🙂 gorgeous photography, can’t wait to see more.

        2. 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).

          1. 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.

  30. Brooke

    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!

    1. Hi Brooke, thank you. What’s your URL so I can see your specific code?

  31. Will

    Hi Ellie,

    Thank you very much about the tutorial.

    I tried to do follow your tutorial and I get a problem that my manu bar isn’t in center. see it in . And here is my code http://piclair.com/data/rle0m.jpg

    Please help me to fix it.

    Thank you so much,

    1. Hello Will. Find #wcddmenu and replace the code between the brackets with float:none; width:740px; height:45px; display:block; padding:0; margin:0 auto;

  32. Sarah

    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?

  33. Hi I did this but when I look for it in my HTML about ]]> it just shows the same code I copied in to my ‘Add CSS’ not the code you have shown… How do i solve this?

    1. 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>

  34. Xiaoyu

    Good evening Ellie,

    I was wondering what the link or address should be if I want my “home” link back to http://www.boldandink.com I cant get it to work even if I leave it blank.

    Thank you!!

    1. 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 🙂

      1. Xiaoyu

        Thanks ellie!
        Is there any way to space out the tabs with out adding spaces in between the tabs and add a search box ?

        1. 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.

          1. Xiaoyu

            WOW Ellie,

            You are truly a special person. I’m so thankful for all of your responses and your help. I’d love to link to you on my blog when I’m done with the layout.

          2. Awh thank you so much, that’s so sweet 🙂

  35. Thank you! Thank you! Thank you! I finally got my sticky navbar that I wanted 😀

  36. 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!!

    1. 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.

  37. Hey Ellie,
    I’ve got a problem.
    On making the navigation bar sticky using this method makes all other JQuery floating effects stop.
    If you have any solution for that please?

    1. If you already have jquery.min.js on your blog then you don’t need to reinstall that script.

      1. That worked. Thanks 🙂

  38. 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/

    1. Hello Omar, thank you so much. I cannot get onto your blog to check specific code but make sure your navigation is set up correctly. Have a look at this tutorial create a basic navigation menu. The lists should be displayed as inline-blocks.

      1. Thank you for your quick response Ellie. For now, I’ve change my template and had the navigation bar fixed. Anyways, thank you for your easy to follow tutorials. It’s indeed a great site to learn blogging.

  39. I tried doing this with my drop menu and it wouldn’t work. Is there any extra coding I need? Thanks!

    1. 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 🙂

      1. I added you to my page admin and I tried to send you an email to that address and it didn’t go through! Your help is GREATLY appreciated. Please note- you already had a shout out my resources page. 🙂 I used your site to remove my previous header with image mapping and to make this new drop down menu (not styled yet, I don’t know how) and my social media buttons!!

        1. Whoops – sorry I wrote it wrong. How embarrassing is it that I spelt my name wrong haha it’s ****@gmail.com can you re-add that? Sorry! Awh thank you so much 🙂 x

        2. Can you go back into permissions and change it from author to admin. This just gives me access to your template 🙂

          1. Done! I had actually changed it over before I even saw this. 🙂 I’m new to the blogging world so it takes me a moment to catch one!!

          2. You’re the BEST!! You rock! 🙂

          3. Ah thanks, it’s no problem, will reply to your email now 🙂

  40. 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

    1. 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!

  41. Elise

    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

    1. Hi Elise, Whats your URL? I’ll need to take a look at your code to see whats conflicting.

  42. 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 ♥

    1. 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.

      1. Thank you, but if I remove the codes from “sticky navigation bar when scrolling”, then I have a normal navbar thats at the top 🙁

        1. 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.

          1. Hello.
            When I copy the code #navigationbar { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;} in my CSS, nothing happens 🙁

          2. Hello, your navigation menu doesn’t include the div id navigationbar so it doesn’t know to attach the CSS for #navigationbar to that element.

          3. And how can I include the div id? I’m sorry but I have no idea 🙁

          4. I’ve added it into the tutorial 🙂 see step 2 of the first method.

  43. Arul Frances

    Hello Ellie,

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

    Thanks and Regards,
    Arul Frances

  44. 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. 🙂

    1. Hello. It’s because of the border-top value under #PR-BLOGGER_wrapper

  45. 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

    1. 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>.

  46. 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?

    1. 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.

  47. hello :), i use method 1 and don’t work. The code html of my navigation bar is :

    code>

    Acceuil |
    title |
    title|
    title

    It’s is good ?

    After i add in my HTML code abode ]]> the step 4 and 6

    Am I doing something wrong?

    thx

    1. Hello, i try again, again and again and it’s ok 🙂
      Thank you

    2. Hello, the code hasn’t been added properly so I can’t check for errors. Can you paste it into this website, click encode and paste the output into the comment box.

  48. 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.

    1. Hello, I’m not sure what you mean. By making the navigation sticky, it will overflow the header when scrolling.

  49. 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!

    1. Hello. Find .tabs-inner .widget ul and add text-align: center; in between the brackets.

      1. Jess | the Jess Journals

        Thank you, that worked! I really appreciate your help! 🙂

  50. 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.

    1. Apply the different style to .fixed, that will only show when it appears sticky.

  51. Hi Ellie,
    I can’t get this to work at all on my blog? Nothing seems to change?

    Do you have any advice?

    xx

    1. Hey lovely, did you try tutorial 1 part 6? If so, your page list is called PageList2 so use #PageList2 instead of #PageList1 🙂

  52. 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

  53. 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

    1. 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.

  54. hello. I did the second one where in my nav bar in under the header. where will I put the HTML script?. on the side of my blog?. please help. thank you!

    1. You can put the gadget anywhere in Layout tab 🙂

  55. Thank You very much. it looks good

  56. 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!

    1. 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.

      1. Thx for the rapid reply! 🙂 So i would just need to wrap my linkbar in: ???

        1. Yes, wrap link bar in <div id="navigationbar"> and </div>

          1. 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. 🙂

          2. 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.

          3. 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.

          4. 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.

          5. so basically edit navigationbar to reflect #LinkList1? if so, i did that and still no working.

          6. 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.

          7. Accepted the invite, can you change permissions from “author” to “admin” so I can access your template please 🙂

  57. just invited you. thanks so much for your help, i greatly appreciate it. my goal is to have it fixed and i want it to look like these here: http://www.brooklynblonde.com/ http://www.bjonesstyle.com/blog/

    1. Fixed. Your “edit html” is clickable, it’s just that the button is grey. I cleaned up a few errors in your CSS. If you want me to style it this way for you, you’ll have to put an order through here.

      1. awesome! thx so much! sending you an email right now!

  58. hI, i DID TRY ADDING THE CODE AS PER YOUR STEPS BUT IT SOMEHOW DOES NOT WORK, CAN YOU PLEASE HELP ME OUT. tHANK yOU. pRIYA

    1. 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.

  59. 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.

    1. Check out this post for helping you find ]]></b:skin>

  60. Okay! Sorry to bother you again but I got the header to be sticky, but when it scrolls, it disappears behind my images and posts as opposed to on top. Any ideas/help?

    1. 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.

      1. 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.

        1. 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>).

  61. 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

    1. I see you got it working Lindsay, sorry I didn’t get back to you sooner 🙂

  62. 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

    1. 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.

  63. 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?

    1. Hello. Find #cssnav and add text-align: center; between the brackets 🙂

  64. 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!

    1. 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 🙂

      1. Lindsay

        Thank you thank you thank you! You are such a doll for getting back to me so quickly!

  65. Jessica

    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.

    1. 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.

      1. Jessica

        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.

        1. 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.

  66. 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.

    1. I can no longer see the code in your template but I presume you are using the first method. Remove left: 0px; from the CSS.

      1. Thanks ellie! I think i got the wrong in the sticknav code because it has no (.) hehe thankyou for the tutorials anyway, they’re so helpful!

  67. 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!

    1. 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.

  68. Very nice. Thanks I got what I Googled.

  69. Cool. Thank you. bookmarking this.

  70. Thank you so much!!!! Really2 appreciate this. Thank you!

  71. Hi Ellie, thank you for this extremely helpful post!
    I was wondering if it is possible to control the navigation bar’s opacity?

    1. Hello, yeah you can. I have a tutorial for that here.

  72. 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!

    1. Find #navigationbar and remove left: 0px;, then adjust the width value to 1110px 🙂

  73. 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!!

    1. This post here should help 🙂

  74. 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

    1. 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.

  75. 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!

    1. 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”.

  76. Thank you so much, exactly what I’ve been looking for! =)

  77. Thanks, it took me a little time, but it still worked.

  78. 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! ^^

    1. 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);.

  79. 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.

    1. 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…

      1. Eloise

        just ignore the previous messages from me. very sorry, figured everything out. thanks again for the tutorial.

  80. 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. 🙂

    1. 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.

  81. 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!

    1. 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.

  82. 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!

    1. 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.

  83. I actually decided to go with method one, and it’s working for me!
    Thanks for the tutorial!

    xo sarah

  84. 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?

  85. 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!

    1. 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.

  86. 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

    1. Hey Anna, it’s working very smoothly for me without jumping so try clearing your browser cache to reset it. Hope this helps.

  87. Hi, I’m using bloggers page gadget and I tried the codes but nothing seems working…what am I doing wrong??

    1. Hello, I don’t see the code from Method 3 in your template, only the code from Method 1 which won’t work for the pages gadget.

      1. I tried all of the options from method 3 and none of them worked.

        1. Hello, just checked the ID on your gadget and #PageList1 will work for you.

          1. Hi, I tried it and also the other ones but nothing changes.

          2. Hi Jenny, you’re missing a closing bracket before #PageList1 in your CSS. Any errors like this in the CSS will prevent it from being read.

          3. Never mind I already fixed it 🙂 thx

  88. Jennifer

    Is there a way to do this with the sidebar instead?

    1. Hello, yeah of course. You can use the same method and just tweak it to get the sidebar instead of the navigation.

  89. Marcus

    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

    1. Hello, add a width value to sticknav 🙂

      1. Marcus

        Hi,

        Thanks! But it still doesnt seem to stretch to the left of the screen, thanks!

        Regards,
        Marcus

        1. Oh! To make it full width you’ll need to add the CSS exactly as shown above with the same values as shown.

  90. 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 ! 🙁

    1. Hey. Change the height value for #navigationbar and then add #cssnav{margin: 10px 0px;} to move the items.

  91. 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!

    1. 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;}

  92. Thanks for sharing, it’s very useful

  93. 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.)

    1. Hello, you don’t have the code implemented so I’m afraid I can’t check for conflicts. If you re-install it I will have a look for you. Make sure the CSS is exactly as shown above.

      1. Wow, you replied really fast. Thanks!

        I installed it.

        1. Hey! Okay so it’s actually because you’re using a custom menu from another site instead of Blogger default menu, so remove the padding values that you added on #navigationbar and add .bhribbon {margin: 0 auto; width: 900px;} to your CSS to centre. Hope that helps!

          1. Thanks Elaine! You’re the BEST!

  94. 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?

    1. Hello, I’m so sorry but I’m not sure what you mean? You want it higher on the page, larger…? Apologies!

      1. Nevermind, I solved the problem. ^^

        Thanks for sharing tips for everyone!~ 😀

  95. This was a great tutorial, just wanted to ask if there is a way to create a drop down menu for page list gadget in blogger??

    1. Hello Samileen. No unfotunately not, you’ve to create a custom navigation as shown here.

  96. 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?

    1. 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.

  97. Hi, thank you so much for the solution. I was greatly helped with this tutorial in making the navigation bar sticky.

  98. 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

    1. 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.

  99. Shivansh Verma Skv

    Thanks XOMISSE! for this type of useful post

  100. Yapo

    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!

  101. 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!

    1. I should have pursued your tutorials a bit more – I found the one on removing borders! 🙂

  102. Hi there!

    Your code worked perfectly, but it’s covering part of my header. Is there any way I could fix this?

    1. Hello! It’s because the navigation is fixed instead of actually being at the top, to fix it add header { margin-top: 50px; } to your CSS 🙂

      1. Omg, it worked perfectly! Thank you so much 🙂 I have another quick question, since I moved the navigation bar to the top, there’s a big space between the header and the posts and widgets, is there a way I can move them up a little bit?

        Thank you so much for your help!

        1. No problem. You can decrese the padding value for .main-inner

  103. I was just wondering, how can i get the sticky navigation to appear under my header, but when you scroll to have the navigation at the top.

    1. Hello Katie, that’s tutorial 2 above 🙂

  104. 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?

    1. 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.

      1. 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!

  105. 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.

    1. 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.

      1. sHARLEEN

        Thank you for your help! It worked brillant. 🙂

  106. 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.

    1. 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.

  107. 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?

    1. Hello, increase the padding-top value for .main-inner or add a margin-top value to it 🙂

      1. Melissa

        Thank you for the quick reply, Elaine. I thought you were going to say that, haha. I don’t know if i’m doing something wrong but i’ve tried both of those and they don’t seem to be working.

        Melissa

        1. Try adding .main-outer{ margin-top: 200px; } right above ]]> </b:skin> in Template > Edit HTML.

  108. 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. (:

    1. 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!

  109. 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!

    1. 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.

  110. 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!

    1. Hey Jessie, I’ve just had a look at it seems to be centred so I presume that you resolved it but just wanted to make sure?

  111. 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!! 🙂

    1. 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.

      1. Kirsty

        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! 🙂

        1. 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!!

  112. Hi! Please help me on my blog. I want a fixed navigation bar and it doesn’t work on my blog. Is there an easier way to do it? Thanks! 🙂

    1. 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.

  113. 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 🙂

    1. Hello, you don’t seem to have the CSS from Tutorial 3 in your template?

  114. 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!

    1. Hi Sarah, thank you so much! I’m glad you find the tutorial helpful 🙂

  115. 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?

    1. Hello. It’s using the default Blogger code .tabs-inner .widget ul, you can edit that or you can add a background to #navigationbar.

  116. 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

  117. 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!

  118. 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!

    1. 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!

  119. 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

    1. 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).

  120. 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!

    1. 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.

      1. 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!

      2. I found the example I was looking for!
        It has the exact function I’m looking for. I hope it’s possible, because it’s pretty cool in my opinion. (The animation. I’ve tried tinkering with it so far but I can’t get it working.)

        Here: https://www.gamerebels.com/

      3. 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.

  121. 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 🙂

    1. 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?

  122. 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

    1. Hello. Creating a custom menu with header included would be the best / easiest solution.

  123. 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!

    1. 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;}

  124. 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.

    1. 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!

      1. I DID IT! Sorry for chating with myself in here 😀

    2. 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.

  125. 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

  126. 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!

    1. 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.

  127. 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!

  128. Nathalie

    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

    1. Hey Nathalie, thank you so much. If you want the navigation at the top of the page, but want it to be a normal static navigation instead of being fixed or sticky then follow the tutorial here to move it.

  129. Jennifer Verroi

    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?

    1. Hello, remove the top margin from .tabs-inner .section:first-child ul, and add #PageList1 {background:#fff;padding-top:20px;}

  130. 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

    1. Hello lovely, thank you so much. If you’re noticing a jump, you may need to increase the aboveHeight value to be the true height of what is above your navigation. Hope that helps!

      1. 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

        1. Sorry – I already find the bug – THANKS for your great help 🙂

  131. 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!)

  132. Hi Ellie,
    I tried this, but it is not working. I’m not able to find my navigation code.

    1. 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 🙂

  133. 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!!

    1. 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.

  134. Victoria Huntington

    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!

  135. 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”.

    1. Hello 🙂 follow tutorial 2 but skip step 2 as you already have the PageList navigation.

      1. Ok. I can’t do this 🙁 Maybe, there is a problem with it? Because, my nav is now sticked.

        1. Remove position: fixed; top: 1px; left: 0px; right: 0px; from #PageList1 ul and follow the steps in tutorial 2 🙂

  136. 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

    1. 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.

  137. Thank you for sharing..

  138. 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

    1. Hi Ishi. Thank you! Yes, first remove padding on .fixed. Since you have a set width you need to change the sticknav margin-left and margin-right to auto.

      1. Woah…that was a quick answer!

        That did the trick!

        keep up the good work and thanks alot for all those awesome tutorials!

        1. No problem Ishi, so glad they helped!

  139. Thanks a lot it worked.

  140. extremely beautiful and helpful!

  141. Firstly – At last! A snippet of code which actually works on blogger! I’ve search for hours looking for, and testing, various pieces of code that ended up breaking my layout! Then I found this, and it does *almost* exactly what I want!

    Following the steps for tutorial 2 gave me the result I want, but with one slight problem. The page still jumps as I scroll. A minor annoyance, but an annoyance nonetheless.

    I’ve tried changing aboveHeight to various different numbers, none of which seem to make any difference. Could you take a look and suggest a solution?

    thewaxpicture.blogspot.com

    Thank you for this cool solution!

  142. Hey! Could you please help me in my blog you can see a sticky menu with header at the top, I want to remove this sticky menu from all the pages except homepage because it is looking odd. So please help me…
    My blog url : http://www.fullonstudy.com

  143. Thank you so much! I ‘ve set my fixed menu bar as your tut. It works! Awesome!

  144. Hi!

    I tried scrolling through comments to see if this was answered already, but I didn’t find it, so I apologize if this is a repeat question.

    I have been using a sticky navbar for awhile. It’s been great!
    I would love to now have a FIXED full width gadget above my sticky navbar.
    Example of what I want: http://www.barefootblonde.com
    Mine: http://www.mycupofchic.com

    Could I follow Tutorial 3 except with a regular gadget instead of a page gadget to get this effect? Or would it be an entirely different code?

    I have actually asked a blogger forum this question, and they said since I’ve already added multiple coding tweaks to my default Simple theme, they can’t help me. Then I found you! So I figured I’d ask here too!

    Thanks so much for all your tutorials and help!

    xo
    Taylor

    1. Hey Taylor, so you need tutorial 2 above for a sticky menu (navigation under the gadget, then navigation becomes fixed upon browser hitting it) instead of a fixed navigation (at the top straight away), hope this helps!

  145. Hi!

    Thanks you so much for this, I don’t find this method on french blog.
    I try it to apply but it doesn’t work. May be it’s a problem to fonction with french language?

    Can you see and help me where I have a problem in my code? http://www.lespetitesbullesdemavie.com/

    I want the pink menu scroll at the top of the page when I scroll under it.
    May be you can tell me how can change the menu style when I scroll? A transparence white background may be?

    Thanks you so much!
    Kiss
    The frenchy girl

    1. Hello! You’ve got an error var aboveHeight = 476('Header').outerHeight();, you need to remove the 476.

      1. Great, thanks so much it works.
        As you can see, the nav bar is pink, it’s great. but the text is a little more under it. I need the text is in it when I scroll and may be in white.

        Can you help me a little more and tell me where I need to change?

        Thanks so much sweety!

        1. You need to remove the margin value for .tabs-inner .section:first-child ul and change text colour for .tabs-inner .widget li a

          1. if I do this, I touch the base navigation bar on my blog. Effectivly, it great result But I just want to change when it’s scrolling :/ Not the base.
            Do you see what I said?

          2. Apply the margin to #barre_nav ul instead and then you can override the stickynav margin with sticknav #barre_nav ul instead 🙂

          3. Thanks again so much for your help, it’s so kind and nice to help me to do it!
            I not really succed in what in want to do? Even, I don’t know really how I change the margin and if it’s great but it works.
            I don’t succeed in change text color in sticknav so, I choose white background for now.
            Again thanks, you’re amazing.

            Wait other tuto 😀

            Aurélie

  146. Esma

    How do I make my social links into my footer?

    Thank you

    1. Hello, there’s a couple of tutorials here that will help.

  147. Sherrie

    It worked for me today! Thanks so much for posting this! I’ve used several of your tutorials over the past several years and have had much success.

  148. Wow, it’s an amazing post…nice one

  149. osama

    thank you TUTORIAL 2 working very Good

  150. So how can I do this with my page list? instead of a nav bar?

    1. Tutorial 2 will work the same, Tutorial 3 is a method similar to Method 1 but for the page list widget 🙂

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.