Try this, it worked well for me. But place it below your current css styles
for I had made some changes to reflect a screen size of 768px or below.
CSS Code
@media (max-width: 768px) {
/* Customize the navbar links to be fill the entire space of the
.navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: block;
width: 100%;
}
.navbar .nav li {
display: block;
width: 100%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 0 solid rgba(255,255,255,.75);
border-right: 0 solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 0;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0;
}
}
HTML code
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#"><i class="icon-home"></i>
Home</a></li>
<li><a href="#"><i class="icon-file"></i>
Projects</a></li>
<li><a href="#"><i class="icon-user"></i>
Services</a></li>
<li><a href="#"><i class="icon-download-alt"></i>
Downloads</a></li>
<li><a href="#"><i class="icon-question-sign"></i>
About</a></li>
<li><a href="#"><i class="icon-comment"></i>
Contact</a></li>
</ul>
</div>
</div>
</div>
</div><!-- /.navbar -->
On Thursday, February 21, 2013 12:25:49 PM UTC-8, iange87 wrote:
>
> Strange! It's 980px width for me. Eh?
>
> Can't help with the dropdown though I'm afraid.
>
> On Wednesday, February 20, 2013 6:16:05 PM UTC, Tom Brossman wrote:
>>
>> Sorry, no idea. Maybe try a new question about the dropdown not appearing
>> in IE8?
>>
>> On Wednesday, February 20, 2013 5:27:29 PM UTC, Olli . wrote:
>>>
>>> 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.
