Bootstrap 3 how to not stack nav-justified in smaller viewports

Question

I have a bootstrap nav and I need to avoid stacking of it on smaller viewports so that it stays horizontal and does not stack.

Here is a example

HTML:

<div class="menuBar">
    <ul class="nav nav-justified">
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
        <li>
            <a href="#" class="menuItem">
                <i class="glyphicon glyphicon-asterisk"></i>
            </a>
        </li>
    </ul>
</div>

CSS:

.menuBar ul {
    text-align: justify;
}
.menuBar ul li a {
    display: inline-block;
}
.menuItem {
    font-size: 24px;
}

Extended version: http://jsfiddle.net/m5k93rwo/

What is the best way to do that? I suspect some play with data-toggle but, unfortunately, I'm not experienced enough to be sure how make it working well

maybe the answer to this question can help you: http://stackoverflow.com/questions/23535289/bootstrap-3-disable-navbar-collapse — ChaoticNadirs, Sep 23 '14 at 10:57
You don't play with data-toggle, it has nothing to do with it. If I understand, you don't want a mobile nav? You want not collapse because justified-nav looks bizarre in the collapse as it's not meant to go there? — Christina, Sep 23 '14 at 12:13
Whatever you don't want to collapse don't put inside a .collapse — Christina, Sep 23 '14 at 12:14
@ChaoticNadirs nope, it's not working with nav-justify which i am using — nagafono, Sep 23 '14 at 13:56
@Christina yes, that's correct. About collapsing... actually i don't use it directly here at all. — nagafono, Sep 23 '14 at 14:01
Do you mean you want to avoid stacking, you want to keep it horizontal? — Christina, Sep 23 '14 at 14:02
Collapsing and stacking are different. I re-worded your question and answered it. — Christina, Sep 23 '14 at 21:26

score 6 · Accepted Answer · answered Sep 23 '14 at 21:25

6

Add this css after all your other css:

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }

answered Sep 23 '14 at 21:25

Christina

32,538
17
76
118

This does not normalize the borders (stacked tabs obviously have different borders than horizontally aligned tabs). – Dr. Jan-Philip Gehrcke May 27 '15 at 21:38

Bootstrap 3 how to not stack nav-justified in smaller viewports

1 Answers1

Linked