Bootstrap non collapsable navbar with dropdowns

Question

I am trying to create navbar which is not responsive and have some dropdowns

I am able to make it non responsive via below css.But if i click the drop downs in navbar in mobile it messes up.Here is the bootply http://www.bootply.com/k9wnO3WaO4 , Try the mobile view and click todo to recreate this problem.

<style>
.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}


.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}
</style>

sample dropdown

<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
                </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a></li>
                        <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a></li>
                        <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                            design</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a></li>
                    </ul>
                </li>

Please have a look at this [SO question](http://stackoverflow.com/questions/17935601/how-to-remove-responsive-features-in-twitter-bootstrap-3). It's pretty similar. — AWolf, Mar 09 '15 at 22:09
That removes whole responsiveness, I just want to remove responsiveness in navbar .. — Vishnu, Mar 10 '15 at 05:57

score 2 · Accepted Answer · answered Mar 10 '15 at 22:04

There is one media query responsible for the behavior that I think you don't like.

It is in css the following media query:

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu {
         background-color: transparent;
         border: 0 none;
         box-shadow: none;
         float: none;
         margin-top: 0;
         position: static;
         width: auto;
    }
...
}

Just override the style like in the following css:

.navbar-nav .open .dropdown-menu {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}

You can find your updated Bootply here.

In the demo below I had to add !important to the background color. Not sure why because at Bootply that isn't required.

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}


.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}

.navbar-nav .open .dropdown-menu {
 background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    position: static;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default" role="navigation">
  <div class="container">

<ul class="nav navbar-nav navbar-left">
<li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown"><span class="fa fa-bell"></span> <span class="label label-success">0</span></a>

</li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Chat <span class="fa fa-comment"></span>
                </a>
                    
                </li>
                <li class="dropdown"><a href="#" data-tad="l1" class="nottodo dropdown-toggle" data-toggle="dropdown">Todo <span class="label label-info">0</span>
                </a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="label label-warning">4:00 AM</span>Favourites Snippet</a></li>
                        <li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a></li>
                        <li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
                            design</a></li>
                        <li class="divider"></li>
                        <li><a href="#" class="text-center">View All</a></li>
                    </ul>
                </li>
</ul>

<ul class="nav navbar-nav navbar-right">
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-user"></span> <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Profile</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-cog"></span>Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="glyphicon glyphicon-off"></span>Logout</a></li>
                    </ul>
                </li>
            </ul>
</div>
</nav>

What do you mean what's not working properly? Do you mean that the button Todo may wrap to the next line at smaller sizes or that the style of the dropdown changes at mobile size? — AWolf, Mar 12 '15 at 20:26
when accessed in mobile , and clicked on todo , it collapses to new line. — Vishnu, Mar 13 '15 at 09:25

Bootstrap non collapsable navbar with dropdowns

1 Answers1