January 5, 2012

How to Center Your Navigation Bar/Page Links

I shared this blogger tutorial on my friend Pamela's blog PB&J Stories this week and I am posting it up here in case you missed it! If you would like to view all of my blogger tutorials either click here or just click the "tutorials" button up on my nice and centered navigation bar! ;)

Let's begin with the super simple blogger tutorial:
I don't know how many of you use the blogger default page links. You might have a custom navigation bar installed so this will not work for you but if you use the default one from Blogger and you hate that Blogger automatically places all your links to your left, then this tutorial is for you! I used to have a custom navigation bar but adding/deleting pages to a custom bar is such a pain! So I decided to go with the default for myself and I centered it to make it look just right! This is a super easy tutorial, no need to mess with your EDIT HTML page! 

Here is what you do:
 Go to the "Template Designer" tab within Blogger.  Select the "Advanced" tab and then the "Add CSS" then paste the following code: 
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}


If you are happy with what you see in the preview section, then hit "Apply to Blog" and your changes will be saved! If you don't see any changes in your preview section, try hitting the enter/return button after pasting your code. If that doesn't work, then you probably have a custom navigation bar or it is hidden. I just love seeing everything nice and centered in a blog, don't you? Let me know if this tutorial was helpful! 

21 comments:

  1. Thanks for sharing this. I couldn't believe how simple it was!

    ReplyDelete
  2. YES!!! YOU ARE A GOD. I have been trying to do this for hours!!

    ReplyDelete
  3. Cindy,
    Thank you for sharing this but I have a question. I do have the CSS in my blog template but I've added another page and now they are centered across with the one page underneath my other pages. Help!?! Does it have something to do with padding? Where would I find the padding for my "Pages" element in Blogger? Here is my blog: www.EmmeAndMe.blogspot.com
    Thanks for any and all help you can give me =)
    Kristy

    ReplyDelete
  4. Thank you so much…I love when fiddling with CSS actually works for me!

    ReplyDelete
  5. You are awesome! I have been looking for an answer for this and every other one I found was a bit touchy. Thanks! :)

    ReplyDelete
  6. Thank you so much. I'm trying to work on a customized blogger layout for a friend and you've made it super easy! Thanks for your time!

    ReplyDelete
  7. Thank you for this! I've been trying to figure out how to center my navigation bar and you made it so easy. Is there a way to make your pages/links more or less spread out on the navigation bar?

    ReplyDelete
  8. Seriously, I have been trying to find out how to do this for over a week. This was so simple! Thank, thank, thank you!!

    Danielle
    stylizingit.blogspot.com

    ReplyDelete
  9. Wow, that was so easy!! Thanks for the tip!

    ReplyDelete
  10. Thank you!! Been trying to work out how to do that and it was really annoying me! x

    ReplyDelete
  11. it didn't work for me either :(

    ReplyDelete
  12. you are a genius! thanks so much x

    ReplyDelete
  13. OMG I've tried at least 30 other codes and this one worked thanks so much

    Raven
    www.swankstylista.com

    ReplyDelete
  14. I wish this worked for me but it doesn't :( I've tried other codes that center the text in the sidebars and those work but for some reason this code doesnt work

    ReplyDelete
  15. OMG it worked for me thank u so much!

    ReplyDelete
  16. It worked thank you so much xx

    www.beautiliciousd.blogspot.com

    ReplyDelete

I would LOVE to hear from you! :)