How can I create a responsive navigation menu using HTML?
Asked on Oct 12, 2025
Answer
To create a responsive navigation menu using HTML, you can utilize the
<nav> element along with some basic CSS for styling and media queries for responsiveness.
<!-- BEGIN COPY / PASTE -->
<nav>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<style>
.nav-menu {
list-style: none;
padding: 0;
display: flex;
justify-content: space-around;
}
.nav-menu li {
margin: 0 10px;
}
.nav-menu a {
text-decoration: none;
color: black;
}
@media (max-width: 600px) {
.nav-menu {
flex-direction: column;
align-items: center;
}
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The
<nav>element is used to define a set of navigation links. - Flexbox is used to arrange the menu items horizontally and responsively.
- Media queries adjust the layout for smaller screens by stacking the menu items vertically.
✅ Answered with HTML best practices.
Recommended Links: