nav tag wrapping around dropdown

Question

I am trying to display my menu, while menu is displaying perectly, it does have open within nav, which hide everything behind it, as navbar-fixed has come style. what should i be doing to fix the issue?

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <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>
      <a class="navbar-brand" href="<?php bloginfo( 'url' ); ?>"><?php bloginfo( 'name' ); ?></a>
    </div>

    <div class="navbar-collapse collapse">

      <?php 
        $args = array(
          'menu'        => 'header-menu',
          'menu_class'  => 'nav navbar-nav',
          'container'   => 'false'
        );
        wp_nav_menu( $args );
      ?>

    </div><!--/.navbar-collapse -->

  </div>
</nav>

Answer 1

Setting specific min-width and max-width for your <nav> menu will fix the issue:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="min-width: 1000px; max-width: 1000px;">

Here's the JavaScript/jQuery method that will set the min-width and max-width of your .navbar when the event 'affix.bs.affix' got fired:

var navbar = jQuery('nav.navbar');

// If 'affix.bs.affix' is fired.
navbar.on('affix.bs.affix', function () {
    // Set the min-width and max-width.
    jQuery(this).css('min-width', navbar.width());
    jQuery(this).css('max-width', navbar.width());
}

The event 'affix.bs.affix' will fires immediately before your .navbar has been affixed. For more info visit JavaScript · Bootstrap - Affix: Events.

Answer 2

The problem was position, the menu would push the header within which it was wrapped, after i set the position to relative. It was fixed.

nav{
 position:relative;
}