Current status of the Ning Platform is always available on the Ning Status Blog.

Blogs

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.

CarmenElectra.com

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!

Email me when people comment –

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Comments

  • 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

  • Any ideas ...doesn't work.

  • THANK YOU! love it!
  • 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;
    }
  • You want it in the right? try this
    #xg_navigation ul {
    float:right;
    }
  • i believe the default is left
  • I believe having the bar on the right is a default option. I can't seem to find it though.
  • 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!
  • Many Thanks Shali for this trick...it works
  • Thanks for this!
This reply was deleted.

Meanwhile, you can check our social media channels