Hi,
That worked very well but dropdowns caused problems. Here is the fixed
version, which should work! =)
@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;
}
}
Olli
keskiviikko, 20. helmikuuta 2013 18.43.36 UTC+2 Tom Brossman kirjoitti:
>
> 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.
