HTML Layouts

Set width: full 320 768 1024 1920 custom
Source code

<!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>