CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
anthr
anthr

Reputation: 719

Twitter bootstrap navbar and dropdown - not resizing

Im currently using a dropdown inside of the menu in my navbar. The drop down works fine when the navbar is in high resolution layout.

When operating in the mobile layout the navbar will not resize when the dropdown is selected, that is unless I open the navbar, then close it, then open it again. While doing this, I noticed that the navbar will not slide down on the first opening - which leads me to believe this is related to a JavaScript event.

Edit - Added nav collapse markup for before and after, and pre render. Problem can be reproduced in Bootply using pre-render markup for the nav-collapse div.

Pre-rendered markup:

<div class="nav-collapse">
    @PageTemplateFeature("Main Navigation")
    <div class="pull-right">
        @PageTemplateFeature("Service Menu")
    </div>
</div>

Before re-opening:

<div class="nav-collapse in collapse" style="height: 176px;">

Before re-opening

After re-opening:

<div class="nav-collapse in collapse" style="height: auto;">

After re-opening

Markup:

<div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
                <a href="/" class="brand"><span style="color: black;"></span>.COM</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="/">Home</a></li>
                        <li class="dropdown">
                            <a data-toggle="dropdown" class="dropdown-toggle" role="button" href="#" tabindex="-1" id="drop_1">Magazine</a>
                            <ul aria-labelledby="drop_1" role="menu" class="dropdown-menu">
                                <li><a href="/Magazine/Current-Issue" tabindex="-1">Current Issue</a></li>
                                <li><a href="/Magazine/Digital-Edition" tabindex="-1">Digital Edition</a></li>
                            </ul>
                        </li>
                        <li><a href="/Blog">Blog</a></li>
                    </ul>
                    <div class="pull-right">
                        <ul class="nav">
                            <li><a href="/Sitemap"> Sitemap </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
</div>

Thanks in advance.

Upvotes: 2

Views: 2306

Answers (1)

anthr
anthr

Reputation: 719

Found a solution, the nav-collapse div also needs the collapse class:

<div class="nav-collapse collapse">
    @PageTemplateFeature("Main Navigation")
    <div class="pull-right">
        @PageTemplateFeature("Service Menu")
    </div>
</div>

https://github.com/twitter/bootstrap/issues/5671

Upvotes: 2

Related Questions