First, create your HTML structure. In this example we're just using a basic unordered list inside a
Next, create your basic CSS. Not all browsers support media queries, so make sure that the menu is set up well and looks good without them.
Now we'll add our media queries to make our menu responsive. There are different theories about exactly what resolution to add your queries. The goal is to give everyone the most optimal experience, without making the screen change back and forth constantly for those that have a borderline resolution.
First, we'll add a query for the screen resolution going below 860px. Again, feel free to change your exact resolution as it fits your content and target audience. The first one doesn't seem to need much of a change, but it would be nice if the font size got a little smaller to accomodate the change in list item size.
Now we're going to make this menu readable for those on smartphones and smaller tablets. The problem with a horizontal menu created with floated list elements many times is that once the screen gets below a certain resolution, the menu starts to collapse around itself. To combat that, we'll make sure that when the screen gets around that breaking point, that we switch the menu up to a flexible vertical menu.
To do this, we'll turn off the list item floats and make sure they're cleared, lessen the padding to accomodate this change, and make sure it's centered on the site.
Now you can test it yourself. Open it up in your browser (or view my sample in the Codepen example below) and slowly decrease the browser size and watch as your menu adjusts.