Set width: full 320 768 1024 1920 custom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header with search bar, menu and profile dropdown menu</title>
<meta name="description" content="Header with search bar, menu and profile dropdown menu">
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 20px;
background-color: #f8f8f8;
border-bottom: 1px solid #ccc;
position: relative;
}
header input[type="checkbox"] {
display: none;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.menu {
display: flex;
gap: 1rem;
}
.menu a {
text-decoration: none;
color: #333;
padding: 8px 12px;
}
.menu a:hover {
background-color: #e0e0e0;
}
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
border-radius: 4px;
}
.menu-toggle svg {
width: 28px;
height: auto;
}
.search-bar {
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-bar input {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.user-account {
position: relative;
}
.user-account label {
background: none;
display: block;
border: none;
cursor: pointer;
border-radius: 4px;
margin-left: 1em;
transition: background-color 0.3s ease;
}
.user-account label svg {
width: 28px;
height: auto;
}
.user-account label:hover {
background-color: #e0e0e0;
}
.user-account .dropdown {
display: none;
position: absolute;
top: 100%;
right: 0;
user-select: none;
background: #fff;
border: 1px solid #ccc;
font-size: .9em;
z-index: 1000;
}
.user-account .dropdown a {
display: block;
padding: .5em 1em;
}
.user-account .dropdown a:hover {
background: #eee;
}
@media screen and (min-width: 1024px) {
.user-account:hover .dropdown {
display: block;
}
}
@media (max-width: 1023px) {
header {
align-items: flex-start;
flex-wrap: wrap;
}
.menu {
display: none;
flex-direction: column;
user-select: none;
gap: 0.5rem;
position: absolute;
left: 0;
top: 100%;
width: 100%;
background: #fff;
border: 1px solid #ccc;
}
.menu a {
width: 100%;
text-align: left;
}
.menu-toggle {
display: block;
margin-left: auto;
}
input:checked + .menu {
display: flex;
}
.search-bar {
margin-top: 8px;
margin-bottom: 8px;
width: 100%;
order: 4;
}
.search-bar input {
width: 100%;
}
.user-account input:checked + .dropdown {
display: block;
}
}
</style>
</head>
<body>
<div class="wrap">
<header>
<div class="logo">Logo</div>
<label class="menu-toggle" for="cb-menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 6h16.5m-16.5 6h16.5" />
</svg>
</label>
<input type="checkbox" id="cb-menu">
<nav class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search...">
</div>
<div class="user-account">
<label for="cb-user-dropdown">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
</svg>
</label>
<input type="checkbox" id="cb-user-dropdown">
<div class="dropdown">
<a href="#">Profile</a>
<a href="#">Settings</a>
<a href="#">Logout</a>
</div>
</div>
</header>
</div>
</body>
</html>