How To Responsive Navbar HTML CSS

Code Zara 2025-04-21 15:49:51

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
@media screen and (max-width:769px) {
    header{
        height: 100px;
        background-color: red;
        position: relative;
    }
    .logo{
        font-size: 35px;
        font-weight: bold;
        color: white;
        width: 100%;
        text-align: center;
        padding: 20px 0px;
    }
    h1{
     color: white;
     background-color: black;
     text-align: center;
     padding: 30px;
     font-weight: bold;
    }

    header ul{
        position: absolute;
        top: 100px;
        left: 0px;
        width: 100%;
        background-color: red;
    }
    header ul li{
        list-style: none;
        display: block;
    }
    header ul li a{
        text-decoration: none;
        padding: 20px 0px;
        display: block;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        color: white;
        transition: 0.5s;
    }
    header ul li a:hover{
        background-color: white;
        color: red;
    }


}


@media screen and (min-width:769px) {
    header{
        background-color: red;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;
    }
    .logo{
        font-size: 35px;
        text-align: center;
        color: white;
        font-weight: bold;
    }
    h1{
        color: white;
        background-color: black;
        text-align: center;
        padding: 30px;
        font-weight: bold;
       }

    header ul li{
        list-style: none;
        display: inline-block;
    }

    header ul li a{
        text-decoration: none;
        color: white;
        display: block;
        padding: 20px 10px;
        font-size: 18px;
        font-weight: bold;
        transition: 0.5s ease;
    }
    header ul li a:hover{
        background-color: white;
        color: red;
    }


}
    </style>
</head>
<body>
    <h1>How to responsive Navbar design with html css</h1>
    <header>
        <div class="logo">Code Zara</div>
        <div 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>
        </div>
    </header>
</body>
</html>

YouTube Tutorial Video

JavaScript Introduction

How To Responsive Navbar HTML CSS and JavaScript

Responsive Navbar HTML CSS And JavaScript

How to Design Calculator with HTML CSS JavaScript

Calculator design

How To Responsive Navbar HTML CSS

YouTube Tutorial Video

How To Carousel Slider Bootstrap 5.3

How to add to cart shopping in HTML,CSSs, JavaScript

How to HTML CSS Form Design in Animation border

How To Responsive Navbar HTML CSS

JavaScript Introduction

How To Responsive Navbar HTML CSS and JavaScript

How to Design Calculator with HTML CSS JavaScript