Navbar buttons are left aligned and stack on smaller resolutions - html

Question

I'm having some issues with my Navbar. It collapses on <768px but from 768 onwards it will do this stupid thing until it can fill the page properly:
I have tried entering nav-justified to the HTML but it just stacks each button.
Ideally I'm looking for any solution that doesn't look stupid, but unfortunately I need to leave every single link on this menu so even culling some isn't an option.
I think best bet would be to have it all center align so that if it has to stack it is at least in the middle.
Anyone else had this issue before?

Answer 1

Here are a few ways to solve this problem.
1) Reduce the font size
2) Utilize dropdown menus.
3) Add another (permanently exposed) bar for frequent/common links.
See working example.
.navbar.navbar-custom,
.navbar.navbar-custom2,
.navbar.navbar-custom3 {
background: white;
border-radius: 0;
border: none;
border-bottom: 3px solid red;
}
/**NAV One**/
.navbar.navbar-custom .navbar-nav > li > a {
font-size: 12px;
}
/**NAV Three**/
.navbar-default.nav-top {
background: white;
border-top: 3px solid red;
}
.navbar-default.nav-top ul {
display: inline-block;
float: right;
}
.navbar-default .navbar-top li {
float: left;
font-size: 12px;
}
.navbar-default .navbar-top li a {
color: #555;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nv1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">NAV 1</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nv1">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li>TRAINING
</li>
<li>HEALTH
</li>
<li>SAFETY
</li>
<li>TRAINING CALENDAR
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-info">NAV One + Smaller Text</div>
<nav class="navbar navbar-default navbar-custom2">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nv2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">NAV 2</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nv2">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li>TRAINING CALENDAR
</li>
<li>ABOUT
</li>
<li>CONTACT
</li>
<li class="dropdown"> SERVICES <span class="caret"></span>
<ul class="dropdown-menu">
<li>TRAINING
</li>
<li>HEALTH
</li>
<li>SAFETY
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-danger">NAV Two + Dropdown</div>
<nav class="navbar-default nav-top">
<div class="container-fluid">
<ul class="nav navbar-top">
<li>ABOUT
</li>
<li>CONTACT
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default navbar-custom3">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nv3" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">NAV 3</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-nv3">
<ul class="nav navbar-nav">
<li>HOME
</li>
<li>TRAINING
</li>
<li>HEALTH
</li>
<li>SAFETY
</li>
<li>TRAINING CALENDAR
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-warning">NAV Three + Upper Links</div>

Answer 2

Would it be as simple as changing the #media queries higher like maybe around 800-900? Then change it to dropdown menu as suggested by vanburenx?