CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
sax
sax

Reputation: 838

Bootstrap having 2 navbar items on a single line in mobile

I implemented 1 logical menu item - date filter - as 3 Bootstrap navbar items - Prev button, date text, Next button. Since I am using icons for Prev and Next, all these 3 items can fit single line in mobile view (horizontal mode). But bootstrap puts each of them to single line which is using too much space and is not nice.

It there any way how to tell Bootstrap to treat those 3 items as single item and position them on single line in mobile view (but keep current focus behavior, i.e. each button is highlighted separately and text is not highlighted on focus)?

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li><p class="navbar-text">today</p></li>
            <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
        </ul>
    </div><!--/.navbar-collapse -->
</div>

Real life example is deployed in http://odpad-praha8.rhcloud.com/ so you can check also there. I am using the latest Bootstrap 3.

Upvotes: 0

Views: 2091

Answers (2)

zessx
zessx

Reputation: 68790

Add an custom .inline class on your items, and use this code :

<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="disabled inline"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
            <li class="inline"><p class="navbar-text">today</p></li>
            <li class="inline last-inline"><a href="#"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
            <li><a href="#">Another link</a></li>
            <li><a href="#">Another link</a></li>
        </ul>
    </div><!--/.navbar-collapse -->
</div>

@media (max-width: 768px) {

  ul.navbar-nav li.inline {
    float: left; // make .inline items to float on mobile
  }
  ul.navbar-nav li.last-inline + li {
    clear: both; // avoid next item to float
  }
  ul.navbar-nav li.inline a { // fix broken padding
    padding-top: 15px;
    padding-bottom: 15px;
  }

}

Bootply

Upvotes: 1

Surjith S M
Surjith S M

Reputation: 6740

You can use custom media queries to do this.

Eg:

@media (max-width: 768px) {

ul.navbar-nav, ul.navbar-nav li {
  display:inline
}

}

You can also use float if you need it in left and right sides.

Upvotes: 0

Related Questions