Non-collapsing bootstrap 3 dropdown menu on mobile

Question

I'm trying to get a twitter bootstrap dropdown menu to not collapse and stay on the same line when using smaller devices. Here is what it currently looks like:

enter image description here

I'd like for the name (in this example John Smith) to be inline with My Application text and toggle button. How would I go about accomplishing that?

Example: http://bootply.com/99326

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">My Application</a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right navbar-user">
                <li class="dropdown user-dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                        <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</div>

Duplicate question. [See this question](http://stackoverflow.com/questions/9385836/twitter-bootstrap-dropdowns-inside-navbar-but-outside-nav-collapse?rq=1) — Schmalzy, Dec 09 '13 at 04:17
Seems so, though most of the answers are dated or referring to twbs 2. I'm thinking there has to be an easy way to do it in recent releases. — Joshua, Dec 09 '13 at 04:37
It doesn't look like there is an easy "out of the box" way to do it, but I did find [this question](http://stackoverflow.com/questions/18610249/twitter-bootstrap-3-navbar-navbar-right-outside-navbar-collapse) which seems to have two valid answers (with bootstrap 3). — Schmalzy, Dec 09 '13 at 21:08
Bootstrap 3 is significantly different than 2. I posted an answer below. — Christina, Dec 09 '13 at 21:27

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

DEMO: http://jsbin.com/eNUpufIs/2/edit?html,css,output

I make the demo links big so you can see it.

<div class="navbar navbar-default navbar-fixed-top my-custom-nav" role="navigation">

  <div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">My Application</a>
      

 
<div class="navbar-right navbar-text cursor" data-toggle="dropdown" data-target=".user-dropdown">
<i class="fa fa-user"></i> John Smith<b class="caret"></b>
</div>         



       <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
      </div>


  
    <ul class="nav navbar-nav navbar-user navbar-right">
                <li class="dropdown user-dropdown">
                
                    <ul class="dropdown-menu">
                        <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                        <li><a href="#"><i class="fa fa-envelope"></i> Inbox<span class="badge">7</span></a></li>
                        <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                    </ul>
                </li>
            </ul>
  
  
</div>
</div>

CSS:

body {padding-top:50px;}

.cursor {cursor:pointer}



/* your going to need to fiddle with the css to make the menu consistent left padding-margin */

/* consistent left padding */
 @media (max-width:767px) {
    .my-custom-nav .navbar-collapse .navbar-nav > li {padding-left:15px!important;}

    .my-custom-nav .user-dropdown > .dropdown-menu > li {padding-left:5px!important;}

}

Make sure you test it!

You're right, the versions of bootstrap have major differences. Unfortunately a lot of stackoverflow stuff is covering the former. Might take me a few hours to test through it, but it's looking good so far, thanks! — Joshua, Dec 09 '13 at 22:17
Clicking on the dropdown doesn't close the collapse, but that's not a serious issue. The only thing I might add to make it look a bit nicer is the top border to the dropdown. http://jsbin.com/eYILOcu/1/watch?html,css,output — Joshua, Dec 09 '13 at 23:19
Yep. Tweak away. I have never seen an implementation like this but it sure is handy. — Christina, Dec 09 '13 at 23:26
Nor have I, it's especially handy for interactive mobile applications that need to retain visible navbar items. Cheers for cooking up the template. — Joshua, Dec 09 '13 at 23:29

Non-collapsing bootstrap 3 dropdown menu on mobile

1 Answers1

DEMO: http://jsbin.com/eNUpufIs/2/edit?html,css,output

CSS: