Coolest Guides on the Planet

coolest guides on the planet

Coolest Guides On The Planet

  • Home
  • macOS
  • WebDev
  • All Posts
  • Contact

Extend the Twenty Eleven Theme Menu Navigation to FullScreen

October 6, 2011 31 Comments

How to get  the WordPress Twenty Eleven 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 ‘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.

Cats: WordPress Tags: css, fullscreen, menu

Tags

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls

Donate a Beer to the Coolest Guides

Get Beaver Builder Now!

Discuss

3gs 10.6 apache backup baseband boot clean urls cpanel css curl custom database drupal el capitan git Google image instadmg ios iphone jailbreak keys lion mac macos mojave macos sierra menu mysql OSX panda php phpmyadmin private public redirect redsn0w remote rsa SEO shell ssh terminal unstoppables upgrade urls
Get DesktopServer

Lynda

Lynda.com Online Training Videos

TreeHouse

smlinks

Learn WordPress
osx-modify-shell-path

How to Add to the Shell Path in macOS Big Sur and Catalina using Terminal

October 19, 2019

virtual-hosts osx 10.10 yosemite

Set up Virtual Hosts on macOS Catalina 10.15 in Apache

October 19, 2019

Installing Homebrew on macOS Catalina 10.15, Package Manager for Linux Apps

October 18, 2019

Where is the bash shell in macos Catalina?

October 12, 2019

Refine your search

  • All
  • Modules
  • Themes
  • Documentation
  • Forums & Issues
  • Groups

RSS ars technica

  • Musi says evidence shows Apple conspired with music industry on App Store ban
  • Trump threatens Apple with 25% tariff to force iPhone manufacturing into US
  • I helped a lost dog’s AirTag ping its owner: An ode to replaceable batteries
  • Apple legend Jony Ive takes control of OpenAI’s design future
  • Epic goes to court to force Fortnite back on US iOS

RSS mac surfer

  • Tot is new text editor for Mac, iPhone, and iPad focused on constraints and ease of use
  • TiPbITS: Google Drive Sorting Can Hide New Documents
  • How to take a screenshot on a MacBook Pro
  • How To Create Simple Animation With Mac Keynote
  • Last Week on My Mac: Virus pandemics

Donate

Copyright © 2025· Neil Gee - All Rights Reserved - Hosted by Runcloud

Copyright © 2025 · gee on Genesis Framework · WordPress · Log in