title: Bootstrap dropdown not showing fully
body: <p>I have added a bootstrap framework to a new theme in WordPress and my dropdown is not shown fully. I have tried with <code>z-index</code> but still nothing. Can anyone help me.</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/ZT5Qj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZT5Qj.jpg" alt="enter image description here"></a></p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt; &lt;!-- container-fluid --&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;!-- do not remove these, this will be visible on the mobile devices --&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;!-- do not remove these, this will be visible on the mobile devices --&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;!-- do not remove these, this will be visible on the mobile devices --&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="&lt;?php bloginfo('url')?&gt;"&gt;                
                  &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/assets/main_logo.png" alt="beekeeper-design-studio-logo.png" title="Beekeeper Design Studio Logo"/&gt;
              &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="navbar-right"&gt;
              &lt;?php /* for Bootstrap navbar use this php from -  https://github.com/twittem/wp-bootstrap-navwalker */
                  wp_nav_menu( array(
                      // name of the menu which you created in wp admin panel 
                      'menu'              =&gt; 'wp-primary-menu',
                      'depth'             =&gt; 2,
                      'container'         =&gt; 'div',
                      'container_class'   =&gt; 'collapse navbar-collapse',
                      'container_id'      =&gt; 'bs-example-navbar-collapse-1', // to collapse the navbar in responsive
                      'menu_class'        =&gt; 'nav navbar-nav', // ul menu class
                      'walker'            =&gt; new wp_bootstrap_navwalker() //Process nav menu using our custom nav walker
                      ));
              ?&gt;                
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- container-fluid --&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here's the HTML output of this code.</p>
  
  <p><a href="https://i.stack.imgur.com/AvWON.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AvWON.jpg" alt="enter image description here"></a></p>
  
  <p>The dropdown is not behind or forward it is actually not going outside the navbar container. Increasing the navbar height shows the dropdown. </p>
  
  <p><a href="https://i.stack.imgur.com/eSdCk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eSdCk.jpg" alt="enter image description here"></a></p>