Creating A Responsive Menu

Continuing on our article from last week, we’re going to create a responsive menu for your site’s theme

This is a tutorial to help you create a responsive menu for the theme that we built in our tutorial last week. If you missed that tutorial, you can find it here.

Responsive websites are made to be viewed on any tablet or phone and easily accessible on any device. Whether you think you need it or not, this means that you’re going to have to make sure that it’s navigable as well. What good is a responsive home page if that’s the only page you’re able to view? So, we’re going to need to make a responsive menu for our theme.

In this tutorial, we’ll design a menu that can be shown on desktop sites. We’ll use media queries to hide this menu on phones or tablets. Then, we’ll use jQuery to display the hidden menu on smaller screens. In order to start, we’re going to add the following HTML code for a menu under the closing