Center the Links in Top Nav

Sep 11, 2013 at 9:50 PM
Edited Sep 11, 2013 at 9:51 PM
First, thanks very much for this project!!

I've successfully installed and everything is working.

My question;

How do I center the navigation links inside the top nav?

I know this is something simple, but when you're a Sharepoint novice, nothing is simple.

Thanks.
Coordinator
Sep 12, 2013 at 7:37 AM
Hi,

Are you trying to center the entire navigation bar? If so, my first thought is that you would set the left and right margin to auto for one of the nav containers, i.e.
margin: 0px auto;
or
margin-left: auto;
margin-right: auto;
I couldn't get that to work. I was able to use the following updated styles though, and that did the trick.
.navbar .nav {
    float: none;
 }
.navbar .ms-core-navigation {
    text-align: center;
}
You will likely need to then override this for when the navigation has been collapsed for mobile nav though.

Eric
Sep 12, 2013 at 12:12 PM
Thanks for reply. No I just want to center the link blocks within the nav bar-the blocks that hold the text. I want to change the color of the nav bar from black to some other color as well. Thank you. Damon Johnson
Coordinator
Sep 13, 2013 at 12:37 AM
Hi Damon,

Ah, try something like:
.navbar .menu-item {
  text-align: center;
}
Or possibly
.navbar li.static, .navbar li.dynamic {
  text-align: center;
}
You will want to use Firebug or the IE Developer toolbar to track down the proper styles for the background colors and whatnot. I believe that is .navbar-inverse.

Eric