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! 
Posted by
Labels:

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

  12. it didn't work for me either :(

    ReplyDelete

  13. you are a genius! thanks so much x

    ReplyDelete

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

    Raven
    www.swankstylista.com

    ReplyDelete

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

  19. OMG it worked for me thank u so much!

    ReplyDelete

  21. It worked thank you so much xx

    www.beautiliciousd.blogspot.com

    ReplyDelete

I would LOVE to hear from you! :)

Subscribe to: Post Comments (Atom)