Ask any question about HTML here... and get an instant response.
How do I create a responsive navigation menu in HTML?
Asked on Oct 30, 2025
Answer
To create a responsive navigation menu in HTML, you can use a combination of HTML for structure and CSS for styling and responsiveness. A common approach is to use a navigation bar that collapses into a hamburger menu on smaller screens.
<!-- BEGIN COPY / PASTE -->
<nav class="navbar">
<ul class="nav-list">
<li class="nav-item"><a href="#home">Home</a></li>
<li class="nav-item"><a href="#about">About</a></li>
<li class="nav-item"><a href="#services">Services</a></li>
<li class="nav-item"><a href="#contact">Contact</a></li>
</ul>
</nav>
<style>
.navbar {
display: flex;
justify-content: space-between;
background-color: #333;
padding: 10px;
}
.nav-list {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
.nav-item {
margin-right: 20px;
}
.nav-item a {
color: white;
text-decoration: none;
}
@media (max-width: 600px) {
.nav-list {
flex-direction: column;
display: none;
}
.navbar.active .nav-list {
display: flex;
}
}
</style>
<script>
document.querySelector('.navbar').addEventListener('click', function() {
this.classList.toggle('active');
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
- The
<nav>element is used to define the navigation section. - CSS media queries adjust the layout for different screen sizes.
- JavaScript toggles the menu visibility on smaller screens.
- Ensure links are accessible and styled for both desktop and mobile views.
✅ Answered with HTML best practices.
Recommended Links:
