How to make Bootstrap Navbar "non-responsive"? - html

Question

I am using Bootstrap to design a webpage. In that I am using Bootstrap Navbars however I don't want them to be responsive. I tried making changes to variables.less file, adding .container { width: #container-desktop !important; } to my css file but none has worked so far. My code is as follows:
<div class="navbar-custom navbar-default navbar-fixed-top">
<div style="width: 95%; margin:0 auto;" >
<div class="container-fluid">
<a class="navbar-brand" href="http://someURL/"><img src="images/someImage"></a>
<div>
<ul class="nav navbar-nav myCustomClass1">
<li><span class="name">Welcome Mr Blah, Blah </span></li>
<li><span class="logo1">someStuff</span></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-top test">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<div style="width: 95%; margin:0 auto;" >
<ul class="nav navbar-nav align-nav-items">
<li ng-class="{active: someThing}">aaa</li>
<li>bbb</li>
<li ng-class="{active: someThing}">ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
</ul>
<ul class="nav navbar-nav myCustomClass2">
<li><span class="glyphicon glyphicon-user"></span>xxx</li>
</ul>
<div>
</div>
</div>
</nav>
Please forgive the slightly faulty indentation. The custom css classes are:
.myCustomClass1
{
float: right;
margin:0 auto;
margin-top:1.5%;
}
.myCustomClass2 {
float: right;
margin:0 auto;
}
Is there any way by which I can make such code non-responsive? What I essentially want it to do is instead of responsively changing the design, I want it to get clipped good old fashioned way and make the page horizontally scrollable.

Answer 1

You don't want this in the markup:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
also change
<div class="collapse navbar-collapse" id="myNavbar">
to
<div id="myNavbar">
Change the css for .nav > li and .nav > li > a. Both should be display: block by default (Bootstrap). Change them to display: inline. Style the rest according to your needs.
Edit based on user's JSFiddle:
Is this how you want it? JSFiddle
I've added:
.navbar-inverse {
/* other styles */
height: auto;
overflow-x: auto;
}
.align-nav-items {
min-width: 390px;
}
.nav > li, .nav > li > a {
display: inline;
}

Answer 2

To make navbar non-responsive and all other keep responsive just do the following:
.navbar.navbar-inverse.navbar-fixed-top.test{
min-width: 1200px;/*define as you require*/
}