Dynamic scaling and css3 media-queries often work wonders for a wordpress themes layout… but the menus are often forgotten. Often, designers scale-down all text in the navigation for mobile display, this is useful but has limits. Instead of scaling you may want to re-structure your navigation for mobile display. Rather than css-hacking your menu all to ribbons try this:
We will be using a twentyeleven-theme for this tutorial.
In your themes functions.php-file add the following (down at the bottom will be fine)
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyeleven' ),
'mobile' => __( 'Mobile Navigation', 'twentyeleven' ),
'footer' => __( 'Footer Navigation', 'twentyeleven' ),
) );
Alright, now… in your header.php-file… replace ::
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
With something a little more like… this ::
<div id="primary_navigation"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?></div>
<div id="mobile_navigation"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'mobile' ) ); ?></div>
</nav><!-- #access -->
Alright cats… here’s the fun-part… css-3 media-queries time…
In your style.css-file replace this ::
@media (max-width: 650px) {
With this ::
#primary_navigation{width:auto;height:auto;}
#mobile_navigation{width:auto;height:auto;display:none;}
@media (max-width: 650px) {
/* Reduce font-sizes for better readability on smaller devices and toggle our primary_nav to mobile_nav */
#primary_navigation{display:none;}
#mobile_navigation{display:block;}
And make sure and review css3-media queries (They put style-sheets in our style-sheets… So we can script-styles while we script-styles)
WordPress Membership Site
You may want to have separate menus for users who are logged-in and those who are logged-out. To do that you can use the following ::
Add this to functions.php
register_nav_menus( array(
'primary' => __( 'Primary Nav', 'twentyeleven' ),
'mobile' => __( 'Mobile Nav', 'twentyeleven' ),
'member_primary' => __( 'Members Primary Nav', 'twentyeleven' ),
'member_mobile' => __( 'Members Mobile Nav', 'twentyeleven' ),
'footer' => __( 'Footer Navigation', 'twentyeleven' ),
) );
In header.php replace this:
<?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 position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
With this:
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
<?php if ( is_user_logged_in() ) { ?>
<div id="primary_navigation"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'member_primary' ) ); ?></div>
<div id="mobile_navigation"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'member_mobile' ) ); ?></div>
<?php } else { ?>
<div id="primary_navigation"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ) ?></div>
<div id="mobile_navigation"><?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'mobile' ) ); ?></div>
<?php }; ?>
</nav><!-- #access -->
Don’t forget to add the break-point in style.css ::
Replace this ::
@media (max-width: 650px) {
With this ::
#primary_navigation{width:auto;height:auto;}
#mobile_navigation{width:auto;height:auto;display:none;}
@media (max-width: 650px) {
/* Reduce font-sizes for better readability on smaller devices and toggle our primary_nav to mobile_nav */
#primary_navigation{display:none;}
#mobile_navigation{display:block;}
There you have it. We now have to separate menus in wp-admin and can count on one to replace the other when the view-port is less than 650 pixels in width. Enjoy!
