Extend the TwentyEleven Theme Menu Navigation to Full Width

How to get the WordPress TwentyEleven Theme Main Menu Navigation to go full width screen like the page below.

Both the CSS and ‘header.php‘ files need to be edited, the issue is that the theme is fluid and the ‘nav‘ div sits inside the div of the page which has a max-width of 1000px. We need to move the nav out of the page div but also set the page div to not have a max-width.

This should be done in a child theme to avoid your changes being overwritten.

 

CSS Fix to go from fluid to fixed

Just add this CSS to the end of your style.css

 /* Menu Fix to Full Width*/

body {
padding: 0 0;}

#page {
max-width: none;}

#branding, #main, #footerMenu ul, #access ul {
width: 1000px;
margin: 0 auto;
}

header.php fix to move nav div out of header div

Here we have to adjust the code by moving the closing header tag </header> to a higher position in the html.

Copy and paste the original contents your header.php for back up so you can go back if needed.

Then move the closing header tag so it comes before the opening nav tag <nav id=”access” role=”navigation”> instead of down the bottom before <div id=”main”>.
So the code should now look like the below:

</header><!-- #branding -->
 <nav id="access" role="navigation">
 <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
 <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
 <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
 <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
 <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
 <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
 </nav><!-- #access -->

 <div id="main">

Another issue is getting the display to correctly render in iPad and iPhone, the fluid theme breaks up and collapses components – change the meta viewport tag also in the header.php to:

<meta name="viewport" content="width=1000" />

Whilst this is not the right thing to do now, responsive design and all that – it did fix that particular issue for me at that time.