CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
theHeman
theHeman

Reputation: 505

How to make Bootstrap Navbar "non-responsive"?

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}"><a href="#/somePage">aaa</a></li>
        <li><a href="#/otherPage">bbb</a></li>
        <li ng-class="{active: someThing}"><a href="#/anotherPage">ccc</a></li>
        <li><a href="#/otherURL">ddd</a></li>
        <li><a href="#/anotherURL">eee</a></li>
        <li><a href="#/someURL">fff</a></li>
        <li><a href="#/someOtherURL">ggg</a></li>
    </ul>
    <ul class="nav navbar-nav myCustomClass2">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>xxx</a></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.

Upvotes: 1

Views: 1351

Answers (2)

musafar006
musafar006

Reputation: 989

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;
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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*/
}

Upvotes: 0

Related Questions