I am trying to modify a bootstrap nav menu so that the menu items become center aligned in the dropdown menu when the screen size is below 768px. Currently, the menu items are either staying floated or right aligned, and I can't seem to get them centered in the dropdown menu.
HTML:
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand white">Bab's Kitchen</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<?php html5blank_nav(); ?>
</ul>
</nav>
</header>
CSS:
.nav {
float:right;
}
.nav ul li {
text-decoration: none;
list-style-type: none;
margin-top:17px;
margin-right:15px;
font-size:14px;
float: left;
letter-spacing: 0.1em;
}
.nav ul li a:hover {
text-decoration: none;
color:purple;
list-style-type: none;
}
.navbar-inverse .navbar-brand {
font-family: 'cylburn';
font-size:40px;
color:#fff;
}
@media only screen and (min-width:480px) {
.nav ul li {
font-size:20px;
text-align: center;
}
}
@media only screen and (min-width:768px) {
.nav ul li {
font-size:12px;
margin-right: 10px;
margin-top:18px;
}