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. KatyJanuary 5, 2012 at 1:35 PM

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

    ReplyDelete
  2. UnknownJanuary 15, 2012 at 7:21 AM

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

    ReplyDelete
  3. KristyApril 11, 2012 at 1:40 PM

    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. UnknownSeptember 22, 2012 at 11:40 PM

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

    ReplyDelete
  5. Julie February 27, 2013 at 5:00 PM

    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. Tori LeslieMarch 7, 2013 at 5:46 AM

    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. Chaney @ May Richer Fuller BeMarch 8, 2013 at 1:01 PM

    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. UnknownJune 19, 2013 at 3:17 PM

    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. JennyJune 26, 2013 at 7:42 PM

    Wow, that was so easy!! Thanks for the tip!

    ReplyDelete
  10. UnknownJuly 2, 2013 at 4:03 PM

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

    ReplyDelete
  11. UnknownJuly 9, 2013 at 2:53 PM

    It doesn't work...:-(

    ReplyDelete
  12. UnknownJuly 29, 2013 at 7:48 PM

    it didn't work for me either :(

    ReplyDelete
  13. LottieJanuary 9, 2014 at 3:00 PM

    you are a genius! thanks so much x

    ReplyDelete
  14. UnknownJanuary 16, 2014 at 11:40 PM

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

    Raven
    www.swankstylista.com

    ReplyDelete
  15. AnonymousApril 6, 2014 at 8:04 AM

    huh it doesnt work

    ReplyDelete
  16. AdministratorJuly 24, 2014 at 1:11 PM

    Thank you!!

    ReplyDelete
  17. UnknownJuly 31, 2014 at 11:58 AM

    This isn't working for me :(

    ReplyDelete
  18. OhnoitsMaryjoAugust 9, 2014 at 8:10 PM

    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. Saveth SekNovember 8, 2014 at 1:01 PM

    OMG it worked for me thank u so much!

    ReplyDelete
  20. UnknownJanuary 30, 2015 at 8:21 PM

    it doesn't work on mine :(

    ReplyDelete
  21. UnknownJune 14, 2016 at 5:10 AM

    It worked thank you so much xx

    www.beautiliciousd.blogspot.com

    ReplyDelete

I would LOVE to hear from you! :)

Subscribe to: Post Comments (Atom)