Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



Blogger How To: Center Page Navigation Menu Links

How To Center Your Blogger Pages Menu

 

If you’re a Blogger user, you know that the Pages widget is a little less than pretty. Sometimes you want it to line up properly with the rest of your layout and not appear aligned to the left as it is by default.  I already showed you how to center your Blogger header, so now I wanted to show you how to center the Blogger Pages menu as well.

The code is simple really. All you need to do is head on over to your Template page, click the Customize link, and scroll down to where it says Advanced in the top left hand menu.

From there, select Add CSS and enter the following code:

This will center the Page tabs within your content area. Want to customize it even more and remove those ugly border lines? Check out this post.


  • I checked your code and your PageList is actually PageList2, so change that in the code above!

    • Emily✖️

      I used the code “.PageList2 {text-align:center !important;} .PageList2 li {float:none !important; display:inline !important;}” with you saying it was PageList2, but still have had no luck!

      • Sorry, your PageList2 is an id should should be #PageList2 not .PageList2. Try that and remove the other lines of CSS you have relating to the pagelist. I noticed you have this other line:
        .pagelist { position: fixed; top: 0px; left: 0px; z-index: 999; width:100%;}

        • Emily✖️

          I’ve removed all the other CSS notes I could find and changed it to the one you have suggested, but there is still no change. Is there anything else you suggest?
          Many thanks

          • You could try this, and if it doesn’t work then I’m not sure. It could be conflicting with something else in your template:

            .tabs-inner .widget ul {text-align:center !important;}
            .tabs-inner .widget ul li {float:none !important; display:inline !important;}

          • Emily✖️

            Hi Dana, once again no luck – but thank you anyway! Is there a way that I could allow you to see my template to check? I would not mind paying a small fee for your time

          • Gamze Sarı

            Hey Dana!

            This code you’ve sent for another one, worked for me! Thanks! :))

  • Emily✖️

    Hi Dana,

    Just a quick update – I managed to use your advise to center my nav bar; the problem was simple after days of trying – Blogger wanted it above one of my previous CSS notes!

    Thanks so much, Emily x

  • I don’t believe so…

  • Thank you!

  • Spirituality, Facts, General knowledge, Inspirational, Motivational, every Article can reform yourself. Don’t go without once browsing this site

    http://www.everything4human.blogspot.com

  • Michelle Yep

    What if you already have a ccs before that? Do you double-space it or single? Or none?

  • Charlotte Harris

    Hi!

    I’ve entered the code as instructed and I’m not seeing any change. Any advice? Thanks!

    Charlotte
    http://charlottebharris.blogspot.com

  • thanks a lot!

    sydsense.blogspot.com

  • i think you can add the rel=”nofollow” like this?

    http://www.instructables.com/files/deriv/FK1/LZ7I/HYZX3QPR/FK1LZ7IHYZX3QPR.MEDIUM.jpg

    sydsense.blogspot.com

    • nofollow is not for opening in a new tab, it tells search not to count it as a link

  • Linda C. Thomas

    Thank you so much! I really appreciate your tutorials. Thanks to you my blog is looking much better.
    Cheers.

  • Pratibha Mod

    We can use Tag directly also.http://10-things-and-reasons.blogspot.in/

  • Aleena

    Dana how do you center a drop down navigation bar?

    This is my blog: http://diamondsofsugar.blogspot.co.uk
    Pleeeeeease help!

  • Aly Lyn

    Hi I applied the code but I’m also not seeing any changes? http://beautieviews.blogspot.com/

  • Taylor

    Hey Dana! I needed to ask because I really want my pages centered, but they won’t do it. I’m using the simple template. I really want these centered because it looks weird and makes me frustrated. Please comment back when you can! 🙂

    tayloredbeginnings.blogspot.com

  • ive tried this repeatedly but it only gives space not centering

  • Andrea Nicole

    Oh my gosh!!!! You are a life saver. My laptop just about went through the window, I was so frustrated. This was so easy and definitely helped! Thank you a million times over!

  • Ashley Brooke Anderson

    This was soo helpful thanks so much!

    http://dreamerindior.blogspot.de/

  • any idea how to center a HTML code in a page? for example I posted the html code to add a comment section to my product review page but it’s aligned left, http://xomrsslem.blogspot.com/p/product-reviews.html

  • Annie Porter

    Hi Dana. I’ve tried lots of these and I did them once, and they worked. But then Blogger reset my CSS code and I can’t do anything in there anymore. This is with centre alignment, Editing the ‘Read More’ jumplink and much more. Would you mind checking my blog and give me a few tips?
    http://www.afriendlynature.blogspot.co.uk/

  • saad
  • Thank you! So helpful!

    <3 LR

  • abdom528

    did not work icanbuildablog, you mean the tabs>>>>>>
    did not worl please help
    Smarttecks.blogspot.com

  • Did work for me! Thank you very much!!! 🙂

  • Katerina

    Thank you! it worked perfectly! 🙂
    http://london-vibes.blogspot.gr/

  • Cheeddahlooks

    Thanks very much.

  • Seher Öztemiz
  • Thanks for the code. Unfortunately my blog is being difficult by not accepting any custom CSS. I tried this on a secondary test blog and it worked fine. Any ideas? (My blog url is: https://mirandasbookreviews.blogspot.com/ )

  • Thamíris Maria

    Thanks Dana <3

  • Mandi Thompson

    Hi!

    I’ve entered the code as instructed and I’m not seeing any change. Any advice? Thanks!

    Mandi
    http://www.threethompsonsandadog.com/

Navigate