Designing the menu

In this section, we will take a look at how to hide the desktop menu and show a hamburger icon instead when working on mobiles or tablets:

The design of the mobile view

If we click on the icon, a menu opens on the right-hand side:

Menu opened on mobile

To do that, we will first need to hide the menu on the mobile version and the tablet  version. 

At the end of the header section in our CSS, add the following code:

/* Tablet Styles */@media only screen and (max-width: 1024px) {  header {    display: none;  }}

Now we want to show ...

Get Practical Web Design now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.