How to use nav-pill with nav-justified from bootstrap3x without responsive features

Question

I really want to implement this in my project :

<div class="container">
        <ul class="nav nav-pills nav-justified">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
      </div>
</div>

However I have one demand and it's to strip out the responsive features. To be more exact - to prevent the vertical stacking when the screen get smaller.

Yesterday I spend the whole day looking for ways to make Bootstrap 3 unresponsive. I tried with creating my custom css file overriding the features I want but since I'm just starting to dig in CSS I find it very difficult, and at the moment - impossible to change manually everything that needs to be changed. I tried with the compiler on the official site and had some success but still there were some responsive features left (like the the classes used in a form still were causing elements to collapse). Then I tried bassjobsen's work from here and it was pretty close, but finally when I spoke today to my boss we decided that we will cut fluidity too and stick to the defined width. So I get back to the official site where there is a section describing how to remove responsiveness which you can read here but the problem is that the suggestion and the example provided for this suggestion are just partial solution. For one my nav-pills still collapse after reaching certain width. I downloaded and included the non-responsive.css file that was in the examples project, so this is not the issue. As I see things one have to modify each class manually and there's no easy way to make bootstrap 3 for only hi-res devices (Correct me if I'm wrong please).

I'm sorry I can't provide more code, I've made lot of attempts but I don't think they could be of any help. If someone has had the same issue and has a solution for this it will be most appreciated. I plan on abandoning bootstrap and just pure CSS/jQuery code things, but I really like this feature and I want to add it to my design before continue.

Answer 1

Hi in this particular menu you can do this :

• One remove the class nav-justified this removes the responsive styles.

• Two make your container with your fixed width.

  .container {
    width:800px;
  }
  

View this demo http://jsfiddle.net/52VtD/561/.

Finally if you're using bootstrap only for the visual theme i don't think is the best way.

To keep the styles of the nav-justified you can track this and place it in other class:

.nav-pills li {
  float:none;
  display:table-cell;
  width:1%;
  text-align:center;
}

The demo http://jsfiddle.net/52VtD/566/

Edit

The logic Here -->

I remove the class nav-justified because it's the last that is overwriting the styles on the ul and probably is the called class by the media queries. So removing this you avoid the media queries declaration and don't change positions or displays for the responsive.

And to keep the visual the nav-justified add some styles and i only get those styles and put it over the other class declaration that doesn't take the responsive part.

If you search here http://getbootstrap.com/dist/css/bootstrap.css well you can find wich class are called by the media queries declaration.