Design Tricks #2: Centering the Navigation

[Shali Nguyen]

Welcome to the second in a series of Ning Creators blog posts focusing on simple design tricks you can use on your network.

Trick #2: Centering the Navigation

The following code, used on Carmen Electra's official community, will center your network's navigation area in all web browsers.

To do this, just visit the "Appearance" area inside the "Manage" tab, then paste the following CSS snippet inside the "Advanced" section (underneath any other code that may already be there):

#xg_navigation ul {text-align: center;margin: 0 auto;}#xg_navigation ul li {display: -moz-inline-box; /* inline-block for earlier versions of FF */-moz-box-orient: vertical; /* inline-block for earlier versions of FF */display: inline-block;vertical-align: middle;*display: inline; /* ie7+ hack */*vertical-align: auto; /* ie7+ hack */text-align: left;float: none;}#xg_navigation ul li a {display: inline;}

When you're done, click the "Save" button. Your navigation should now be centered. Enjoy!

[Musa Akbari]

I've tried pasting this code and a few others on different threads to center my navigation menu but it doesn't seem to work. Could anyone take a look at my site and see what the problem is? Thank you! 

www.meritocracyhq.com

[Where Women Blog]

Any ideas ...doesn't work.

[Speed Racer]

THANK YOU! love it!

[Jayne]

this is the code for right hand and left hand nav bar (you have to change the px values for it to fit where you want it to go)
#xg_navigation {
position:relative;
right:-800px;
top: -395px;
margin-top: 2px;
margin-bottom: 2px;
margin-right: -6px;
background: url(non) right repeat-y;
width: 100px
}


this is the left

#xg_navigation {
width: 200px;
position:relative;
LEFT:20px;
top: -440px;
margin-top: 15px;
margin-bottom: 15px;
margin-left:15px
margin-right: 0px;
background:transparent url(pic here); no-repeat;
padding-top: 50px;
height: 280px;
width: 100px;
}

[Ace Albaracin]

You want it in the right? try this
#xg_navigation ul {
float:right;
}

[Carolyn Glasser]

i believe the default is left

[Unpwn Producer]

I believe having the bar on the right is a default option. I can't seem to find it though.

[Carolyn Glasser]

Is there any way to make the navigation bar right justified? I've searched and have only found this centering trick here. My adjustments to the provided code doesn't work to make it right justified.

Thanks in advance for any help!

[caesarleo]

Many Thanks Shali for this trick...it works

[Unpwn Producer]

Thanks for this!