This project is read-only.

Center the Links in Top Nav

Sep 11, 2013 at 10:50 PM
Edited Sep 11, 2013 at 10: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.
Sep 12, 2013 at 8: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 1: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
Sep 13, 2013 at 1: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