I ran into this problem today and figured it out using 'SebastianG''s
advice in this
post<http://stackoverflow.com/questions/14448499/style-twitter-bootstrap-navbar-witout-applying-that-styling-to-collapsed-navbar>on
Stack Overflow.
You need to wrap the CSS styling for that justified navbar in an *@media
query*. The break point for this specific template is 940px, so here is
what I have now, tested and working:
/* Customize the navbar links to be fill the entire space of the .navbar */
@media (min-width: 940px) {
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
}
Don't forget that last right curly-brace at the bottom, to close the @media
query. This leaves the mobile (dropdown) version with the default styling
which already looks fine and doesn't need anything else.
This should really be part of the default example template. I just spent
hours trying to get this perfect. Hope it helps you.
On Sunday, 10 February 2013 10:49:21 UTC, Olli . wrote:
>
> Hi,
>
> How could I make justified nav example responsive
> http://twitter.github.com/bootstrap/examples/justified-nav.html
>
> thanks
> Olli
>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
