HTML CSS Navbar Example: Responsive Horizontal Menu

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML/CSS Navbar Example</title>
    <style>
        /* Basic Reset and Font */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

/* Navbar Container (The UL) */
        .navbar ul {
            list-style-type: none; /* Remove bullet points */
            margin: 0;
            padding: 0;
            overflow: hidden; /* Important for containing floated elements */
            background-color: #333; /* Dark background color */
        }

/* Navbar List Items (The LI) */
        .navbar li {
            float: left; /* Makes items horizontal */
        }

/* Navbar Links (The A) */
        .navbar li a {
            display: block; /* Makes the entire area clickable */
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none; /* Remove underline */
        }

/* Hover effect */
        .navbar li a:hover {
            background-color: #111;
        }

/* Optional: Active link styling */
        .navbar .active {
            background-color: #04AA6D;
        }
    </style>
</head>
<body>

<nav class="navbar">
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
            <li style="float:right"><a href="#login">Login</a></li>
        </ul>
    </nav>

<div style="padding: 20px;">
        <h1>Welcome to the Page</h1>
        <p>This is a simple responsive horizontal navigation bar built using HTML and CSS.</p>
    </div>

</body>
</html>

HTML CSS Navbar Example: Responsive Horizontal Menu

Recommended

Animated Login Form HTML CSS

HTML TV Screen with YouTube Embed and Glitch Effect

CSS Text Color Animation

HTML

CSS

JS

Recommended

Animated Login Form HTML CSS

HTML TV Screen with YouTube Embed and Glitch Effect

CSS Text Color Animation

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS