CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
pocockn
pocockn

Reputation: 2063

Twitter bootstrap dropdown creates a scrollbar

I am using twitters bootstrap to create a responsive site. I have a dropdown with quite a few links, when i'm in mobile view instead of making the nav collapse area bigger it creates a scrolling effect. Is there a way to make to the dropdown force the collapse nav div to increase in size or push my content down?

Here is the code i'm currently using.

<div class="row">
    <div class="col-md-12">
        <nav  id="menu1"  class="navbar navbar-default" role="navigation">
            <div class="navbar-header">
                 <div id="logo" class="pull-left hidden-md hidden-lg">
                        <div class="logo-small">
                            <img src="<?php bloginfo('template_directory');?>/images/logo-xs.png" alt="small-logo" class="img-responsive"/>


                <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>
                                </div>
                     </div>
            </div>
            <?php wp_nav_menu( array( 'theme_location' => 'main-menu',
                                    'depth' => 2,
                                      'container_class' => 'collapse navbar-collapse',
                                     'menu_class' => 'nav nav-pills nav-justified',
                                    'walker' => new wp_bootstrap_navwalker() )); ?>

        </nav>
    </div>
</div>

Upvotes: 0

Views: 980

Answers (1)

Legin76
Legin76

Reputation: 492

Try adding the following to your css.

.navbar-collapse{
    max-height:auto;
}

Upvotes: 1

Related Questions