I'm having a bit of trouble creating a website with Twitter Bootstrap, specifically when it comes to centering the navigation links in responsive design.
My goal is to have a two-row navigation bar for tablet and phone devices, with the brand name at the top and the navigation links below it.
While I can easily center the brand name on the screen, I run into issues trying to apply the same styling to the navigation links as they get stuck on the left side.
To showcase this issue, here's a fiddle: http://jsfiddle.net/AsGHB/5/
Below is the relevant CSS code:
@media (max-width: 767px) {
#bn-logo {
width: 100%;
float: none;
margin: 0 auto;
text-align: center;
}
.navbar .nav {
width: 100%;
float: none;
margin: 0 auto;
text-align: center;
}
}