Well, to be honest i hate the way how they did it. Hopefully it will be much better in the final release. You can take a look at few screenshots in the latest post on wpengineer.

In the video bellow first you will see how it works by default, and then i’ll enable the “hack” and you will see that the width issue is fixed.

The code

Insert the code bellow in your theme’s functions.php file.

function nav_improve() {
   ?>
	<script>
		function resizeNavigationBar(){

			var containerWidth = jQuery('#wpbody-content .wrap.nav-edit-wrap').width();
			var settingsWidth = jQuery('#menu-settings-column').outerWidth();
			var menuLeftMargin = parseInt(jQuery('#menu-management').css('margin-left'));
			var maxMenuWidth = containerWidth - settingsWidth - menuLeftMargin;
			jQuery('#menu-management').width(maxMenuWidth);

		}

		jQuery(document).ready(function(){
			resizeNavigationBar();
		});
		jQuery(window).resize(function(){
			resizeNavigationBar();
		});
	</script>
   <?
}
add_action('admin_head', 'nav_improve');

BONUS: Decrease the font size on the tabs

If you ask me, the font size on the tabs is way too big, we’re not blind. Luckily we can fix that very easy by adding a bit of css to the admin page. Insert the code bellow in your theme’s functions.php file.

function nav_custom_size() {
   ?>
   <style type="text/css">
		#menu-management h2 { font-size:15px; line-height:25px; }
	</style>
   <?
}
add_action('admin_head', 'nav_custom_size');

Visit the best themes marketplace with over 600 premium wordpress themes.