TimesCoding

Learn, Practice, and Excel with our Coding Tutorials!

Creating a Modern Responsive Menu with HTML & CSS Only

June 1, 2024 3 Min read CSS HTML
Modern Responsive Header Menu

Learn how to design a stylish and modern website header section and responsive menu using just HTML and CSS, with a responsive menu that toggles without the need for JavaScript.

HTML code for Responsive Menu & Header

index.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</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="logo">
            <h1>Logo</h1>
        </div>
        <input type="checkbox" id="menu-toggle">
        <label for="menu-toggle" class="menu-icon">
            <span></span>
            <span></span>
            <span></span>
        </label>
        <nav class="menu">
            <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>
        </nav>
    </header>
</body>
</html>

CSS code for Responsive Menu & Header

style.css

/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Header Styles */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #BDBDBD;
    color: #fff;
    position: relative;
}

.logo h1 {
    font-size: 24px;
}

.menu {
    display: flex;
}

.menu ul {
    display: flex;
    list-style: none;
}

.menu ul li {
    margin-left: 20px;
}

.menu ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    transition: color 0.3s;
}

.menu ul li a:hover {
    color: #333;
}

/* Responsive Menu Toggle */
.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-icon span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px 0;
    transition: 0.4s;
}

#menu-toggle {
    display: none;
}

#menu-toggle:checked + .menu-icon span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

#menu-toggle:checked + .menu-icon span:nth-child(2) {
    opacity: 0;
}

#menu-toggle:checked + .menu-icon span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

#menu-toggle:checked ~ .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: #BDBDBD;
    padding-left: 20px; /* Added padding */
    margin-top: 10px; /* Added margin */
}

@media (max-width: 768px) {
    .menu {
        display: none;
        width: 100%;
        background-color: #BDBDBD;
    }

    .menu ul {
        flex-direction: column;
        width: 100%;
    }

    .menu ul li {
        margin: 15px 0;
    }

    .menu ul li a {
        width: 100%;
        text-align: center;
    }

    .menu-icon {
        display: flex;
    }
}

This code ensures a responsive, modern header with a toggle menu that has appropriate styling, spacing, and margin for a clean and visually appealing layout.

Tags:

  1. Responsive Header Design
  2. CSS Only Navigation Menu
  3. Modern Website Header
  4. HTML CSS Menu Toggle
  5. No JavaScript Responsive Menu
Related Post:
Trendy Website Color Combinations for 2024 − Here are some trending color combinations to consider for your website, including header, footer, sidebar, and content section colors with codes: 1. Balanced Brights: 2..
Create a Stylish Analog Watch with HTML, CSS, and JavaScript − Creating a stylish analog watch using HTML, CSS, and JavaScript involves simulating the appearance and movement of clock hands. We’ll build a simple analog clock.
How to Create a Stylish Digital Watch with HTML, CSS, and JavaScript − Creating a digital watch similar to an Apple Watch using HTML, CSS, and JavaScript involves several steps. We’ll build a simple, functional digital clock that.
Creating a Stylish and Responsive Bootstrap Menu with Colorful Toggle Icon − Below is a simple responsive Bootstrap 5 template that you can use as a starting point for your project. This template includes a stylish &.
Responsive Web Design with CSS: A Short Tutorial − Responsive web design is a crucial aspect of modern web development. It ensures that your website looks and functions well on a variety of devices,.
How to Create a Modern Stylish Accordion with Arrows Using Only HTML and CSS − This modern and stylish accordion is created using only HTML and CSS, featuring smooth transitions and interactive arrows that change direction upon expansion. It’s perfect.
How to Create a Stylish and Modern HTML Select Field Using CSS − Creating a modern and stylish HTML “Select” field involves using CSS to enhance the default styling. Here’s an example of how you can achieve this:.
Modern and Stylish Button with Gradient and Hover Effects − This modern and stylish button features a vibrant gradient background that seamlessly transitions on hover, coupled with a subtle box shadow for added depth. Its.
Design a Modern and Stylish Login Form using HTML and CSS − This is a modern and stylish login form using HTML and CSS, featuring 3D effects, colorful fields, and a button. The “Not registered? Create an.
Creating a Modern Button with Stylish Hover Effects Using CSS − This is a modern and stylish button with a simple hover effect using CSS. The button has a bold border & the border color will.
How to Create a Colorful Tic-Tac-Toe Game with HTML, CSS and JavaScript − Here’s a colorful Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript only. The game includes a restart button, winner message, and special effects for the.
Pure CSS Custom Modern and Stylish Checkboxes − Creating a custom modern and stylish checkboxes using pure CSS can enhance the visual appeal of your web forms. Here’s a simple and elegant checkboxes.