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 make our menu responsive

Our menu looks good on a desktop screen but we have to do some work for mobile screens. Here is the look of our menu now if we resize the browser:

How to make our menu responsive

In the preceding screenshot, we can only see the word MENU, and that is not a good user experience. Because of that, we need to change the code in the /* Small menu */ section of style.css, where it says @media screen and (max-width: 600px), which means the code inside of the media query. The current code is as follows:

.menu-toggle,
  .main-navigation.toggled .nav-menu {
    display: block;
  } 
  .main-navigation ul {
    display: none;
  } 

This code is making toggle part a block element, ...

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