nav tag wrapping around dropdown

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.