CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Michael
Michael

Reputation: 1397

Bootstrap Navbar, multiple icons on one row of collapsed menu

I have a nav bar with items on the left and a few icons on the right (with .navbar-right). Looks find on a wide screem but when collapsed each icon takes a row in the expanded menu, I would like to have the three icons show on the same row in the expanded menu on a small screen, Example of what I have is here 

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header" style="padding-left: 10px">
            <button type="button" class="navbar-toggle collapsed pull-left" data-toggle="collapse" data-target="#the-menu">
                <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse" id="the-menu">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/index.html">Home</a></li>
                <li><a href="/issues.html">Issues</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="/index.html"><span class="glyphicon glyphicon-home"></span></a></li>
                <li>
                    <a href="/index.html"><span class="glyphicon glyphicon-log-in"></span></a></li>
                <li>
                    <a href="/index.html"><span class="glyphicon glyphicon-log-out"></span></a></li>
            </ul>

        </div>

    </div>
</nav>

On a phone when you expand the menu each of the three icons takes one row each, I would like them to be on the same row. Each icon has a different link.

Upvotes: 1

Views: 2021

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

You can add some CSS to override the .nav>li to display: inline-block on small screens..

@media (max-width: 768px) {
   .nav>li {
      display: inline-block;
      padding-right: 0;
   }
}

http://www.bootply.com/9Gi06pDJ9d

Upvotes: 3

Related Questions