How to Create a Simple Responsive Navigation Menu Using CSS

Welcome to our CSS guide! Today, we’ll explore how Cascading Style Sheets (CSS) can level up your web design skills. We’ll start with a simple example: creating a responsive navigation menu using HTML and CSS. Let’s dive in together!

HTML Design:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
<style>STYLE GOES HERE </style>

<!-- Navigation Menu -->
<nav class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>


Our HTML code consists of a basic navigation menu created using an unordered list (<ul>) and list items (<li>). Each item has a link (<a>) for navigation.

CSS Styling

/* Navigation Menu Styles */
.menu {
  background-color: #333;
  padding: 10px;

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

.menu ul li {
  display: inline-block;

.menu ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;

/* Media Query for Responsive Design */
@media screen and (max-width: 600px) {
  .menu ul li {
    display: block;
    text-align: center;

Simple Explanation for CSS

  1. Navigation Menu Styles:
  • .menu: This class styles the navigation menu container, giving it a dark gray background and adding some space around it.
  • .menu ul: Styles the unordered list inside the menu, removing any bullets and extra space.
  • .menu ul li: Sets each list item to appear next to each other horizontally.
  • .menu ul li a: Styles the links inside the list items, making them white with no underlines and adding some padding around them for easier clicking.
  1. Media Query for Responsive Design:
  • @media screen and (max-width: 600px): This adjusts the menu for smaller screens, like smartphones.
  • .menu ul li: Within this query, list items are stacked vertically for better mobile viewing, and the text is centered for clarity.

Understanding these basics of CSS will help you create better-looking and more user-friendly websites. Keep practicing, and soon you’ll be a CSS pro!

Leave a Comment