O'Reilly logo

WordPress Responsive Theme Design by Dejan Markovic

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

How to create a menu and make it responsive and accessible

Here is the current look of our menu on the desktop screen:

How to create a menu and make it responsive and accessible

Now, let's look at our menu on the mobile screen:

How to create a menu and make it responsive and accessible

As you can see, the code from underscores (_s) changes the look automatically when we change the screen size, but we still have some work to do.

Menu basics

Our main menu is defined in the functions.php file from lines 43 through 46:

// This theme uses wp_nav_menu() in one location.
  register_nav_menus( array(
    'primary' => __( 'Primary Menu', 'topcat' ),
  ) );

Then, the menu sections are defined ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required