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 the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.