How can I center the nav menu items using bootstrap 3? - css

Question

My Navbar:
Problem
How can I get the admin menu item to be in the middle rather than dropping to the left? I'm using a template I purchased from wrapbootstrap and cannot figure out why this is happening. I've tweaked a lot of CSS using the dev tools in firefox and no matter what I do, ADMIN hangs to the left.
CSS:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">#Html.ActionLink("Home", "Index", "Home", new { area = "" }, new { })</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Games</a>
<ul role="menu" class="dropdown-menu">
<li>#Html.ActionLink("Results", "Index", "Results", new { area = "" }, new { })</li>
<li>#Html.ActionLink("League Table", "Index", "LeagueTable", new { area = "" }, new { })</li>
</ul>
</li>
<li>#Html.ActionLink("Schedule", "Index", "Schedule", new { area = "" }, new { })</li>
<li>#Html.ActionLink("Players", "Index", "Players", new { area = "" }, new { })</li>
<li>#Html.ActionLink("News", "Index", "News", new { area = "" }, new { })</li>
<li>#Html.ActionLink("Gallery", "Index", "Gallery", new { area = "" }, new { })</li>
<li>#Html.ActionLink("Contact", "Contact", "Home", new { area = "" }, new { })</li>
#if (Request.IsAuthenticated)
{
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Admin</a>
<ul role="menu" class="dropdown-menu">
<li>#Html.ActionLink("Admin Home", "Index", "Home", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Games", "Index", "Games", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Game Types", "Index", "GameTypes", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("News", "Index", "News", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Players", "Index", "Players", new { area = "Admin" }, new { })</li>
<li>#Html.ActionLink("Seasons", "Index", "Seasons", new { area = "Admin" }, new { })</li>
</ul>
</li>
}
</ul>
</div>
</div>
</nav>

Answer 1

I had a similar problem before. I reduced the font-size.
.nav.navbar-nav.navbar-right li a {
/*reduce font-size here*/
}
I reduced the padding between the navbar elements.
.navbar-nav > li{
padding-left:30px;/*reduce*/
padding-right:30px;
}
You can also change the margins. It works too:
.navbar-nav > li{
margin-left:30px;
margin-right:30px;
}
Another way to go about it is using the media queries: check which screen-size has the admin dropping down and maybe turn one or two elements into a dropdown at that screen-size: for example have gallery and contacts into a dropdown called More. So when the user clicks it, he will have the option to choose between the two.