Monday, 21 March 2011

Want to have a custom color Blogger nav-bar? Yes it is possible!

Just a reminder that you can change that ugly blue Blogger Navbar (if you haven't already).  I guess it's a classic kind of blue, but it clashes with almost every single one of my templates and I hate it!

Want to change yours too?

To do this, all you have to do is log into Blogger, then go to the DESIGN and then PAGE ELEMENTS tabs. This is where you alter the positioning of your widgets and things.

Click on edit in the "Navbar" area:

This is what you will see:

Now that may be all fine and dandy if you live in boring-land and like boring things but if any of you know me well then you will know that I love to be a bit different :P

Yes, I have worked out how to change the background color (kind of):

  1. I recommend you backup your template before making any changes.  You can do this by going to the Design tab then Edit HTML.  You can then download a copy of your full template.
    This is just a precautionary step in case you do something weird and muck up your blog.

  2. To have our custom colour show up, we need to make sure that we have selected the TRANSPARENT LIGHT navigation bar choice above prior to adding the below code.  If you don't do this, your custom nav bar color will not be seen!

    NOTE: Please note that this is basically showing your background color of choice UNDER the transparent navbar.  Therefore the color is going to be slightly muted and not the exact color that you chose.  I think this is a good compromise.

  3. We are going to paste some code into the big box of HTML.  Now this step is going to be different depending on what template you're using, but we need to paste some code into this box and we need to find a neat place to do it.

    (click for a larger preview)

  4. Now as you will see from the above image, I have pasted these two lines of code in a neat spot (ie: after the curly bracket '}' and before the next one.

    The code you need to use is:

     #navbar-iframe {
    background: #XXXXXX;}

    #XXXXXX = the HEX colour

    ie: #FFFFFF is white and #000000 is black. You can find a list of tonnes of HEX colours on this website or this site OR you could even use ColorZilla in Firefox to pinpoint a specific colour in your blog, grab the colour code and use that!

  5. Paste the code into your blog and alter the XXXXXX to be whatever colour code you want to use. Note that you should ensure there is a ';' at the end of the colour.

  6. Click "Preview" to see if the changes are OK and then SAVE!

  7. If you do not see your newly colored nav-bar then you should check that your Nav-bar is configured to be on "Transparent Light".

To illustrate this works, I have put a bright pink nav bar color on my Blue Love Letter template.  Click here to view the template with pink navigation bar!

If you found this useful, please leave me a comment or re-tweet this link.  I want to share it with as many people as possible because I was never sure (before now) if this could be done.


  1. Genius! I really needed that tip

  2. You can even have a patterned background image (which would look crazy with a normal patterned background).


  3. im using ur template and i love it to the max! TQ

  4. Really useful! Thank you very much!

  5. Lily: you don't need to find the code that is listed above, you need to paste it into somewhere neat (this could be almost anywhere). You should just scroll down the code and paste it in after a curly bracket.

  6. thank...will try it later lol..

  7. I loved it!
    I always cried with the ugliness of the nav-bar. LOL

  8. how do I insert a picture frame to my post pictures? cuz with this template they seem to be gone :(

  9. Great tip - thank you for sharing!

  10. Or if you want to get rid of it completely you can add this into the HTML:

    #navbar-iframe { display: none !important; }


  11. A navybars looks so pretty. How could you did it? I want these templates to install on my blog

  12. This comment has been removed by the author.

  13. YAY! it worked. The black navbar was actually #222222 but as i wanted darker i had to use this tweak but instead of using the clear light i used transparent dark so the white fonts could remain. Take a view Also, can you tell me how to edit the comment box to add that instruction text and the suscribe link on botton?, I really grateful

  14. This comment has been removed by the author.

  15. This comment has been removed by the author.

  16. i searched everyware for this YEEEEEEEEEEEEEEEY


    1. do what this post says^^^
    2. printscreen your blog
    3. open in photoshop
    4. in a new layer, make a box and fill it with solid white
    5. dial down the opacity of the white box until you get the same value as the navbox on your blog (on mine was 40% but it may differ)
    6. select the exact are underneeth the white40%opacity box
    7. image> ajustments> hue/saturation
    8. change "saturation" to 100%
    9. dial down "lightnes" until you dont see the difference between the background and the area that has the white box over it.
    10. make the white box layer invisible to reveal the color you are searching for
    11. click the color selector and then click the color to make the colorpicker display the #value
    12. copy paste this in the code

    there may be problems with darker colors, dont know and dont have time to check

    thanks very much, saved my ars

  17. This comment has been removed by the author.


If you're having issues, PLEASE leave an email address I can contact you on - and also don't forget to leave your blog URL. Please also read my FAQ which are >>> HERE

I advise you to also "subscribe to the comment feed" and get email updates when I respond to your question.

Spam/advertising comments will NEVER BE TOLERATED and will be deleted immediately!

Thanks for reading,