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.

full-screen-menu

full-screen-menu

Both the CSS and ‘header.php‘ files need to be edited, the issue is that the theme is fluid and the ‘navdiv 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.

13 Comments

  1. Judy Ranieri on April 18, 2012 at 1:52 am

    I tried everything you suggested, but it doesn’t seem to be working.  Any suggestions? http://www.mibec.ca/test3 Thanks:)

    • Neil Gee on April 18, 2012 at 6:34 am

      ??? the changes I suggested in the last comment have not been done

      • Mibec3 on April 28, 2012 at 10:37 pm

         Sorry Neil,
        Didnt see your changes.  Will try them today.  Thanks for your help:)

  2. Judy Ranieri on April 14, 2012 at 4:59 am

    Hi Neil,
    I made all the changes to the style and header files but cannot get the header to extend.  Please take a look at http://www.mibec.ca/test3
    thanks,

    • Neil Gee on April 14, 2012 at 6:36 pm

      2 things to fix Judy – add the opening ‘/’ and take out the line numbers in the CSS so you just have:

      /* Menu Fix to Full Width*/

      body {
      padding: 0 0;}

      #page {
      max-width: none;}

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

  3. Anonymous on January 16, 2012 at 6:49 pm

    Now my background colour has disappeared…

  4. Scott on January 2, 2012 at 12:23 am

    It does work but now the footer width isn’t 1000 – it’s wider than the page.

    As a side note is there a way to now wrap the “main” page – i.e. the stuff not in the header or footer – so that it can have a background colour outside of the std 1000px wide?

  5. Belinda on December 14, 2011 at 5:46 pm

    Thanks for the great tips!

  6. Chris on October 31, 2011 at 10:14 pm

    Worked like a charm. Thank you very much.

  7. Christian Schmitt on October 26, 2011 at 10:23 pm

    Hi. I can’t see the code. Can you please update the viewport section? 

  8. Anonymous on October 18, 2011 at 8:29 pm

    Thanks! Can you please update the viewport section? I can’t see the new code.

Leave a Comment





%d bloggers like this: