Hi,
But it does not work with IE 8 =( The dropdown menu items don't appear at
all. Any advice?
Olli
keskiviikko, 20. helmikuuta 2013 19.25.08 UTC+2 Olli . kirjoitti:
>
> 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.
