Twitter Bootstrap 3 - dropdown menu in nav-collapse

Question

I am trying to accomplish what the user menu in this template does but can't seem to get it to work. http://beer2code.com/themes/core-admin/pages/dashboard/dashboard.html (I have purchased the code but am just wanting to get the user-menu functionality working.) When in mobile you click the button and it shows the dropdown menu but not the original dropdown. I have been stuck on this for a while and taking any advice. (Even advice on how to make other parts of my code better if you want to)

here is my markup, assume standard less/css for Bootstrap 3:

<header class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle pull-left" data-toggle="offcanvas" data-target=".sidemenu-offcanvas" id="nav-toggle">
            <span class="sr-only">Toggle navigation</span>
            <i class="icon-reorder" style="color: white;"></i>
        </button>

        <a class="navbar-brand" href="#">
            <img src="assets/images/logos/logo.png" alt="GEC Logo">
        </a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".profile-collapse">
            <span class="sr-only">Toggle user menu</span>
            <i class="icon-user" style="color: white;"></i>
        </button>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".search-collapse">
            <span class="sr-only">Toggle search</span>
            <i class="icon-search" style="color: white;"></i>
        </button>
    </div>

    <div class="collapse navbar-collapse profile-collapse navbar-right">
        <ul class="nav navbar-nav">
            <li class="dropdown ">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    <img src="#" alt="John Smith">
                    John Smith <i class="caret"></i>
                    <span class="badge badge-red">5</span>
                </a>
                <ul class="dropdown-menu">
                    <li class="with-image">
                        <div class="avatar">
                            <img src="assets/images/avatar.png" />
                        </div>
                        <span>John Smith</span>
                    </li>
                    <li class="divider"></li>
                    <li>
                        <a href="#/">
                            <i class="icon-user"></i>
                            <span>Profile</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-envelope"></i>
                            <span>Messages</span>
                            <span class="label label-red pull-right">5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-cog"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="#/">
                            <i class="icon-off"></i>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="collapse navbar-collapse search-collapse navbar-right">
        <form class="navbar-form" action="" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
        </form>
    </div>
</header>

Answer 1

Try something like:

$('.profile-collapse').on('show.bs.collapse',function()
{   
$('.profile-collapse .dropdown > a').hide();
});
$('.profile-collapse').on('shown.bs.collapse',function()
{
    $('.profile-collapse .dropdown').addClass('open');

});
$('.profile-collapse').on('hide.bs.collapse',function()
{
    $('.profile-collapse .dropdown').removeClass('open');
    $('.profile-collapse .dropdown > a').show();
});

add after the boostrap JS or on document ready

update

My concern with this solution is that it seems to animate slowly or lag if you will. (@michael-stramel)

Toggle the navbar be handled by the collapse plugin. This plugin preform a time consuming css3 transition on collapse. For futher information see: Turning off Twitter Bootstrap Navbar Transition animation

In this case try:

.profile-collapse.collapsing {
  -webkit-transition: height 0.0001s ease;
          transition: height 0.0001s ease;
}