Showing example:
No JS is required
To create a responsive header menu using pure HTML and CSS, you can utilize CSS media queries to adjust the menu layout and styling based on the screen size. Below is an example of how you can implement a simple responsive header menu:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Header Menu</title>
<style>
/* Base styles */
body {
margin: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
display: inline-block;
margin-right: 20px;
}
.menu li:last-child {
margin-right: 0;
}
.menu a {
color: #fff;
text-decoration: none;
padding: 10px;
}
/* Media query for responsive layout */
@media screen and (max-width: 768px) {
.menu {
flex-direction: column;
}
.menu li {
margin-right: 0;
margin-bottom: 10px;
}
}
</style>
</head>
<body>
<div class="header">
<div class="menu">
<div class="logo">
<a href="#">Your Logo</a>
</div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
This code creates a simple responsive header menu with a logo on the left and navigation links on the right. When the screen width is reduced to 768px or less, the menu items stack vertically instead of appearing side by side.