title: navigation menu responsiveness bootstrap in WordPress mobile view
body: <p>I have two navigation bar from left and right and it's width are 50% by 50% and their center is my logo. My problem is my navigation menu list in mobile view. When i click the dropdown menu of my menu list, my other primary menu goes down, how can i avoid it going down. ? Please help me.</p>
  
  <p>Here is my site link: <a href="http://bxuwp.codebox.ph/" rel="nofollow">http://bxuwp.codebox.ph/</a></p>
  
  <p>Here is the screenshot of my problem:</p>
  
  <p>Here , so far it is good:</p>
  
  <p><a href="https://i.stack.imgur.com/noSEK.png" rel="nofollow"><img src="https://i.stack.imgur.com/noSEK.png" alt="Looking good"></a></p>
  
  <p>Here is the problem when i click the dropdown menu.
  <a href="https://i.stack.imgur.com/2BKSF.png" rel="nofollow"><img src="https://i.stack.imgur.com/2BKSF.png" alt="enter image description here"></a></p>
  
  <p>Here is my code : </p>
  
  <pre><code>&lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
  
      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
       &lt;/button&gt; 
  
      &lt;div class="logo-wrapper"&gt;
  
          &lt;div class="logo"&gt;
              &lt;?php if ( get_theme_mod( 'm1_logo' ) ) : ?&gt;
              &lt;a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" id="site-logo" title="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;" rel="home"&gt;
              &lt;img src="&lt;?php echo get_theme_mod( 'm1_logo' ); ?&gt;" alt="&lt;?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?&gt;"&gt;&lt;/a&gt;
              &lt;?php else : ?&gt;
                    &lt;img class="logo" src="&lt;?php echo get_bloginfo('template_url') ?&gt;/images/qmark_logo.png"/&gt;
              &lt;?php endif; ?&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="half"&gt;      
          &lt;ul class="left-navlist"&gt;
              &lt;?php
              $args = array(
                    'container'      =&gt; 'div',
                    'container_class'   =&gt; 'collapse navbar-collapse pull-right',
                    'container_id'      =&gt; 'bs-example-navbar-collapse-1',
                    'menu'        =&gt; 'left',
                    'menu_class'        =&gt; 'nav navbar-nav',
                    'fallback_cb'       =&gt; 'wp_bootstrap_navwalker::fallback',
                    'walker'            =&gt; new wp_bootstrap_navwalker()
              );
              ?&gt;
              &lt;?php wp_nav_menu($args); ?&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="half"&gt;      
          &lt;ul class="right-navlist"&gt;
              &lt;?php
              $args1 = array(
                    'container'      =&gt; 'div',
                    'container_class'   =&gt; 'collapse navbar-collapse',
                    'container_id'      =&gt; 'bs-example-navbar-collapse-1',
                    'menu'        =&gt; 'right',
                    'menu_class'        =&gt; 'nav navbar-nav',
                    'fallback_cb'       =&gt; 'wp_bootstrap_navwalker::fallback',
                    'walker'            =&gt; new wp_bootstrap_navwalker()
              );
              ?&gt;
              &lt;?php wp_nav_menu($args1); ?&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here is my little custom CSS for bootstrap navbar:</p>
  
  <pre><code>    .navbar-fixed-top {
          min-height: 95px;
      }
      .navbar-inverse .navbar-nav &gt; .open &gt; a, .navbar-inverse .navbar-nav &gt; .open &gt; a:focus, .navbar-inverse .navbar-nav &gt; .open &gt; a:hover {
          background-color: #e1e1e1;
          color: #fff;
      }
      .navbar-inverse {
          border-radius: 0px;
          margin-bottom: 0;
          background-color: #e1e1e1;
          border-color:#e1e1e1;
          font-size: 16px;
      }
      .navbar-inverse .navbar-nav &gt; .active &gt; a, .navbar-inverse .navbar-nav &gt; .active &gt; a:focus, .navbar-inverse .navbar-nav &gt; .active &gt; a:hover {
          background-color: #e1e1e1;
          color: #993300;
      }
      .navbar-inverse .navbar-nav &gt; li &gt; a {
          color: #252525;
      }
      .logo-wrapper {
          text-align: center;
          margin-bottom: -65px;
      }
  
      .logo {
          margin-top: 5px;
          max-width: 80px;
          display: inline-block;
      }
      .half {
          width: 50%;
          display: block;
          float: left;
      }
  
      .right-navlist {
          padding-left: 60px;
      }
  
      .left-navlist {
          text-align: right;
          padding-right: 60px;
      }
  .drop {
      position: absolute;
  }
  .nav &gt; li {
      float: left;
  }
  .navbar-inverse {
      font-size: 11px;
  }
  .dropdown-menu {
      font-size: 11px;
  }
  </code></pre>