Wordpress navigation in responsive design

by: Erick Arbé

“Poorly executed navigation can
spell disaster for user experience.”

What you might learn today

  • Responsive Web Design
  •  Content strategy affects your navigation
  •  Tips and Tricks for WordPress Menus
  •  Navigation patterns and examples
  •  CSS! Javascript! & More!

Responsive WEb Design

Media Queries

Flexible Images

Fluid Grids

CSS3 Media Queries:

@media all and (min-width:480px){/* This would apply to screens bigger than 480px wide */}    

Flexible Images:

img {  max-width: 100%;}    

Fluid Grids

Website Navigation

  • It's important!
  • Drives user interaction
  • Can make or break your site




content strategy

When Retro-Fitting a Site

"Use mobile as an excuse to revisit your navigation."

When building a new site

  • Think mobile first, then build out
  • The smaller your website - the easier the navigation
  • Content vs. Context - does  "mobile context" exist?

Manipulating Wordpress Navigation

Target your Navigation 

through better CSS Classes

use the Walker Class

wp_nav_menu(   array(     'theme_location' => 'primary',     'container' => false,     'walker'=> new Bootstrap_Walker_Nav_Menu,    'menu_class' => 'nav' );     



Use Custom Classes

Register a second menu

register_nav_menus(   array(
    'large-screen' => __( 'Large Screen Menu', 'baseline' ),
    'small-screen' => __( 'Small Screen Menu', 'baseline' )
  ) ); 

Custom Links

Use hash tags for top level menu items with sub-nav

Reference the Codex


Examples of 

Responsive Navigation

let's view some live demos...

which can also be found at:


Think Touch

Optimal Sizes for Touch Elements

  • Average human finger pad is 10-14mm
  • Apple suggests a 44x44 points (basically, 44px) touch target size (11.6mm)
  • Windows suggests a 9x9mm touch target size
  • Nokia suggests a 7x7mm touch target size

Box Sizing

* { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 

  • http://paulirish.com/2012/box-sizing-border-box-ftw/
  • http://html5please.com/#box-sizing
  • https://github.com/Schepp/box-sizing-polyfill