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

Join over 1,000 creators starting, building and growing their online business

Making marketing more manageable (even with limited time, money and know-how) with the latest strategies, insights and updates delivered to straight to your inbox.

By signing up you’ll receive The Roundup newsletter and additional resources. No spam or unnecessary emails. You can unsubscribe at any time.

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

  1. Viola avatar

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

    caughtinvogue.blogspot.com

  2. Deepa avatar

    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. Ellie M avatar

      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. Deepa avatar

        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. Ellie M avatar

          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. Deepa avatar

            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. Ellie M avatar

            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. Mai avatar

    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. Mai avatar

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

  4. Beckie avatar
    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. Ellie M avatar

      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 avatar
        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 avatar
          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. Ellie M avatar

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

        2. Ellie M avatar

          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 avatar
    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. Ellie M avatar

      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. Nicola Marleen avatar

    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. Nicola Marleen avatar

      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. Ellie M avatar

        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. Elly avatar

    You are amazing!!!!!

    xE

  8. Maru avatar

    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. Ellie M avatar

      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. Maru avatar

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

  9. Priyanka avatar

    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. Ellie M avatar

      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 avatar
    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. Ellie M avatar

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

  11. Majda avatar

    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. Ellie M avatar

      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. Anne avatar

    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. Ellie M avatar

      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. Anne avatar

        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. Ellie M avatar

          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. Anne avatar

    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. Ellie M avatar

      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 avatar
    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. Ellie M avatar

      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. Stephanie avatar

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

    1. Ellie M avatar

      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 avatar
    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. Ellie M avatar

      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 avatar
        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. Ellie M avatar

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

  17. Sarah avatar
    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. Ellie M avatar

      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. Claire avatar

    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. Ellie M avatar

      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. Claire avatar

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

        1. Ellie M avatar

          Awh no problem lovely 🙂 glad you like the blog xx

  19. Sara Mueller avatar

    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. Ellie M avatar

      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. Sara Mueller avatar

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

        xo,
        Sara

        1. Ellie M avatar

          Awh thanks Sara, happy to help 🙂 x

  20. Morgan Andrews avatar
    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. Ellie M avatar

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

  21. Shahel avatar

    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. Ellie M avatar

      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. Shahel avatar

        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. Ellie M avatar

          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. Jade avatar

    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. Ellie M avatar

      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. Jade avatar

        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. Ellie M avatar

          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. MadeByMeg avatar

    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. Ellie M avatar

      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. MadeByMeg avatar

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

        1. Ellie M avatar

          Awh thank you lovely 🙂

  24. Sarah avatar

    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. Ellie M avatar

      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. Carol Patrício avatar

    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. Ellie M avatar

      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. Lucy Cole avatar

    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. Ellie M avatar

      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 avatar
    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. Ellie M avatar

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

      1. Xiaoyu avatar
        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. Ellie M avatar

          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 avatar
            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. Ellie M avatar

            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 avatar
    Abdul Samad

    Oh very nice I really need this thanks for this 😀

  29. Elena avatar

    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. Ellie M avatar

      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. Elena avatar

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

        1. Ellie M avatar

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

        2. Elena avatar

          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. Ellie M avatar

            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 avatar
    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. Ellie M avatar

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

  31. Will avatar
    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. Ellie M avatar

      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 avatar
    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. Laura Jarvis avatar

    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. Ellie M avatar

      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 avatar
    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. Ellie M avatar

      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 avatar
        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. Ellie M avatar

          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 avatar
            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. Ellie M avatar

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

  35. Leelo R avatar

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

  36. Tamara avatar

    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. Ellie M avatar

      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. Qumber Rizvi avatar

    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. Ellie M avatar

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

      1. Qumber Rizvi avatar

        That worked. Thanks 🙂

  38. Omar avatar

    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. Ellie M avatar

      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. Omar avatar

        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. Emily avatar

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

    1. Ellie M avatar

      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. Emily avatar

        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. Ellie M avatar

          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. Ellie M avatar

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

          1. Emily avatar

            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. Emily avatar

            You’re the BEST!! You rock! 🙂

          3. Ellie M avatar

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

  40. Vanessa Eugine avatar

    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. Ellie M avatar

      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 avatar
    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. Ellie M avatar

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

  42. Jule avatar

    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. Ellie M avatar

      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. Jule avatar

        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. Ellie M avatar

          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. Jule avatar

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

          2. Ellie M avatar

            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. Jule avatar

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

          4. Ellie M avatar

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

  43. Arul Frances avatar
    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. Tyler avatar

    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. Ellie M avatar

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

  45. Samantha avatar

    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. Ellie M avatar

      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. Nayah avatar

    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. Elaine M avatar

      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. Sucreacoco avatar

    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. Sucreacoco avatar

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

    2. Ellie M avatar

      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. Samiur avatar

    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. Ellie M avatar

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

  49. Jess avatar

    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. Ellie M avatar

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

      1. Jess | the Jess Journals avatar
        Jess | the Jess Journals

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

  50. Keli avatar

    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. Elaine M avatar

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

  51. Emily avatar

    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. Ellie M avatar

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

  52. Pelayo avatar

    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. Stephanie avatar

    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. Ellie M avatar

      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. Maria Olaguivel avatar

    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. Ellie M avatar

      You can put the gadget anywhere in Layout tab 🙂

  55. aromal avatar

    Thank You very much. it looks good

  56. jen avatar

    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. Ellie M avatar

      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. jen avatar

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

        1. Ellie M avatar

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

          1. jen avatar

            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. Ellie M avatar

            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. jen avatar

            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. Ellie M avatar

            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. jen avatar

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

          6. Ellie M avatar

            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. Ellie M avatar

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

  57. jen avatar

    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. Ellie M avatar

      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. jen avatar

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

  58. Priya avatar

    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. Ellie M avatar

      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. Audrey Williams avatar

    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. Ellie M avatar

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

  60. Audrey Williams avatar

    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. Ellie M avatar

      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. Audrey Williams avatar

        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. Ellie M avatar

          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. Lindsay avatar

    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. Ellie M avatar

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

  62. Jules avatar

    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. Elaine M avatar

      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. Rachel avatar

    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. Ellie M avatar

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

  64. Lindsay avatar

    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. Ellie M avatar

      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 avatar
        Lindsay

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

  65. Jessica avatar
    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. Ellie M avatar

      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 avatar
        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. Elaine M avatar

          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. Cinthy avatar

    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. Ellie M avatar

      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. Cinthy avatar

        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. Rebeca avatar

    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. Ellie M avatar

      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. vivek avatar

    Very nice. Thanks I got what I Googled.

  69. taushima avatar

    Cool. Thank you. bookmarking this.

  70. aswanism avatar

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

  71. sharon avatar

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

    1. Elaine M avatar

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

  72. Matthew avatar

    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. Ellie M avatar

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

  73. Marriah avatar

    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. Elaine Malone avatar

      This post here should help 🙂

  74. Beth avatar

    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. Elaine Malone avatar

      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. Tanya avatar

    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. Elaine Malone avatar

      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. monica avatar

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

  77. Patiencetfa avatar

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

  78. CinthyKwok avatar

    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. Elaine Malone avatar

      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. Eloise avatar

    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. Eloise avatar

      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 avatar
        Eloise

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

  80. Regina @ Margarita Bloom avatar

    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. Elaine M avatar

      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. Cheryl avatar

    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. Elaine M avatar

      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. Katie Holman avatar

    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. Elaine M avatar

      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. Sarah avatar

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

    xo sarah

  84. Kami avatar

    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. Imola avatar

    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. Elaine M avatar

      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. Anna avatar

    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. Elaine M avatar

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

  87. JEnny avatar

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

    1. Elaine M avatar

      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. JEnny avatar

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

        1. Elaine M avatar

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

          1. JEnny avatar

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

          2. Elaine M avatar

            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. JEnny avatar

            Never mind I already fixed it 🙂 thx

  88. Jennifer avatar
    Jennifer

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

    1. Elaine M avatar

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

  89. Marcus avatar
    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. Elaine M avatar

      Hello, add a width value to sticknav 🙂

      1. Marcus avatar
        Marcus

        Hi,

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

        Regards,
        Marcus

        1. Elaine M avatar

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

  90. elza avatar

    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. Elaine M avatar

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

  91. Ali avatar

    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. Elaine M avatar

      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. Claudine avatar

    Thanks for sharing, it’s very useful

  93. Esra avatar

    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. Elaine M avatar

      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. Esra avatar

        Wow, you replied really fast. Thanks!

        I installed it.

        1. Elaine M avatar

          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. Esra avatar

            Thanks Elaine! You’re the BEST!

  94. Esra avatar

    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. Elaine M avatar

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

      1. Esra avatar

        Nevermind, I solved the problem. ^^

        Thanks for sharing tips for everyone!~ 😀

  95. Samileen avatar

    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. Elaine M avatar

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

  96. Sophie anderson avatar

    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. Elaine M avatar

      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. Ahmad Wafa avatar

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

  98. Breanne avatar

    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. Elaine M avatar

      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 avatar
    Shivansh Verma Skv

    Thanks XOMISSE! for this type of useful post

  100. Yapo avatar
    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. Ashley avatar

    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. Ashley avatar

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

  102. Alyssa Orcales avatar

    Hi there!

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

    1. Elaine M avatar

      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. Alyssa Orcales avatar

        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. Elaine M avatar

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

  103. Katie avatar

    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. Elaine M avatar

      Hello Katie, that’s tutorial 2 above 🙂

  104. Stephanie avatar

    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. Elaine M avatar

      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. Stephanie avatar

        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. sHARLEEN avatar

    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. Elaine M avatar

      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 avatar
        sHARLEEN

        Thank you for your help! It worked brillant. 🙂

  106. Julie (xfallenmoon) avatar

    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. Elaine M avatar

      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. Melissa avatar

    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. Elaine M avatar

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

      1. Melissa avatar
        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. Elaine M avatar

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

  108. KIERA avatar

    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. Elaine M avatar

      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. Kristin Fields avatar

    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. Elaine M avatar

      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. Jessie avatar

    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. Elaine M avatar

      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. Kirsty avatar

    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. Elaine M avatar

      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 avatar
        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. Elaine M avatar

          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. Danielle avatar

    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. Elaine M avatar

      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. NINDY avatar

    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. Elaine M avatar

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

  114. Sarah avatar

    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. Elaine M avatar

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

  115. Karin avatar

    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. Elaine M avatar

      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. hemali avatar

    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. Maliha avatar

    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. tanya avatar

    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. Elaine M avatar

      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. Erin avatar

    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. Elaine M avatar

      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. Mark Schauer avatar

    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. Elaine M avatar

      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. Mark Schauer avatar

        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. Mark Schauer avatar

        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. Mark Schauer avatar

        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. Aideen avatar

    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. Elaine Malone avatar

      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. Julia Kim avatar

    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. Elaine M avatar

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

  123. Kristy avatar

    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. Elaine M avatar

      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. Its Miss Ivana avatar

    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. Its Miss Ivana avatar

      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. Its Miss Ivana avatar

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

    2. Elaine M avatar

      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. Julie avatar

    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. Judit avatar

    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. Elaine M avatar

      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. Zara TracesOfPolish avatar

    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 avatar
    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. Elaine Malone avatar

      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 avatar
    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. Elaine Malone avatar

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

  130. duni.cheri avatar

    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. Elaine Malone avatar

      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. duni.cheri avatar

        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. duni.cheri avatar

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

  131. J Annie avatar

    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. Sudheeksha avatar

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

    1. Elaine Malone avatar

      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. Natalie avatar

    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. Elaine Malone avatar

      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 avatar
    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. Alicja avatar

    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. Elaine Malone avatar

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

      1. Alicja avatar

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

        1. Elaine Malone avatar

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

  136. D avatar

    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. Elaine Malone avatar

      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. Blog Dodo avatar

    Thank you for sharing..

  138. Ishi Prende avatar

    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. Elaine Malone avatar

      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. Ishi Prende avatar

        Woah…that was a quick answer!

        That did the trick!

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

        1. Elaine Malone avatar

          No problem Ishi, so glad they helped!

  139. Onkar Patil avatar

    Thanks a lot it worked.