how to disable responsive dropdown navbar in bootstrap 3.0

Question

I want to disable responsive dropdown of navbar in bootstrap and like desktop screen show me. this is my code...

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

<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a>
                </div>
                
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="#">Link</a>
                        </li>			
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#">Link</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">Action</a>
                                </li>
                                <li>
                                    <a href="#">Another action</a>
                                </li>
                                <li>
                                    <a href="#">Something else here</a>
                                </li>
                                <li class="divider">
                                </li>
                                <li>
                                    <a href="#">Separated link</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
                
            </nav>
        </div>
    </div>
</div>

I want to disable dropdown responsible .this is my code in jsfiddle:

http://jsfiddle.net/v5a7kj52/1/

Answer 1

I believe I stumbled upon same problem with my navbar dropdown. With smaller screen, when responsive menu toggle replaces normal menu, dropdown feels awkward. First you have to open menu collapse and then open dropdown, which is rather bad user experience.

I wanted to have as simple and clear solution as possible, so I eneded up using Bootstrap's Responsive Utilities to hide and show selected divs depending of the screen size. Downside is that you have to write menu items twice, but it also gives you complete control over responsive menu content.

I know you already solved your problem, but this option might be good for someone with similar problem.

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#">Brand</a>
                </div>

                <div class="hidden-xs">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="visible-xs hidden-sm hidden-md hidden-lg">
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                </div>

            </nav>
        </div>
    </div>
</div>

Answer 2

my prblem solved with this css:

@media (max-width: 768px) {
.navbar-header {
    float: left;
}
.navbar {
    border-radius: 4px;
    min-width: 293px;
}
.navbar-collapse {
    width: auto;
    border-top: 0;
    box-shadow: none;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-collapse.in {
    overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}
.container > .navbar-header,
.container-fluid > .navbar-header,
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}
.navbar-static-top {
    border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
    border-radius: 0;
}
.navbar-toggle {
    display: none;
}
.navbar-nav > li {
    float: left;
}
.navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
}
.navbar-nav.navbar-right:last-child {
    margin-right: -15px;
}
.navbar-left {
    float: left !important;
}
.navbar-right {
    float: right !important;
}
.navbar-form .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}
.navbar-form .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}
.navbar-form .control-label {
    margin-bottom: 0;
    vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
    float: none;
    margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
    top: 0;
}
.navbar-form {
    width: auto;
    padding-top: 0;
    padding-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    border: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.navbar-form.navbar-right:last-child {
    margin-right: -15px;
}
.navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
}
.navbar-text.navbar-right:last-child {
    margin-right: 0;
}
.navbar-nav .open .dropdown-menu {
    position: absolute;
    -webkit-box-shadow: black;
    box-shadow: aliceblue;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #FFF;
    width: auto;
}
.navbar-nav {
    margin: 0;
}
.navbar-nav .open .yep-notify {
    right: 0;
    left: auto;
    width: 299px;
}

}