navbar css and html example code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Navbar</title> <style> body { margin: 0; } .navbar{ padding: 15px; background-color: grey; display: flex; justify-content: space-between; font-size: 30px; text-decoration: none; color: #fff; } .nav-item { margin: 0; padding: 0; flex: 1; max-width: 50%; display: flex; justify-content: space-evenly; font-size: 25px; } .nav-link { display: inline-block; } a{ text-decoration: none; color: #fff; } @media (max-width: 715px) { .nav-item { flex-direction: column; align-items: center; } .nav-link { margin: 5px 0; } } </style> </head> <body> <nav class="navbar"> <a class="brand" href="">Navebar</a> <ul class="nav-item"> <li class="nav-link"><a href="">Learn more</a></li> <li class="nav-link"><a href="">About</a></li> <li class="nav-link"><a href="">Contact</a></li> </ul> <a class="home" href="">Home</a> </nav> </body> </html>

creating navigation menu using html and css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Navigation</title>
    <style>
        .navbar{
            background-color: black;
            border-radius: 30px;
            
        }
        .navbar ul{
            overflow: auto;
        }
        .navbar li{
            float:left;
            list-style: none; 
            margin: 13px 20px;
            
        }
        .navbar li a{
            padding: 3px 3px;
            text-decoration: none;
            color: white;
        }
        .navbar li a:hover{
            color: red
        }
        .search{
            float: right;
            color: white;
            padding: 12px 75px;
        }
        .navbar input{
            border: 2px solid black;
            border-radius: 14px;
            padding: 3px 17px;
            width: 129px;
        }
    </style>
</head>

<body>
    <header>
        <nav class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact us</a></li>
                <div class="search">
                    <input type="text" name="search" id="search" placeholder="Search this website">
                </div>
            </ul>
        </nav>
    </header>
</body>

</html>

Posted by: Guest on August-17-2021

Source

Answers for "navbar css and html example code"

Code answers related to "navbar css and html example code"

Code answers related to "Html"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us