March 8, 2013

{Blogging} Centering your Menu Bar

The last post in my series {Blogger Tips} was on how to centre your header image/text, and today I'm going to be showing you how to do the same with your menu bar. Once you've got your header exactly where you want it, you need your menu bar to be adjusted accordingly so your blog doesn't look wonky :)



On my blog, my menu bar (which is actually just a list of pages that I have put under my header as opposed to being on the left or right hand side) is at the top of my blog.  I have pages such as "Home" "About", "Contact" etc. 


To have your pages line up nicely with my header, here's what you gotta do:

TEMPLATE > CUSTOMIZE > ADVANCED (scroll down to) > ADD CSS 

Paste the following code and hit enter

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Make sure to look at the live preview, if you're happy then click APPLY TO BLOG and there you go! Easy peasy! 

Let me know if you found this helpful!
xxx