Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a responsive navigation menu with a login form inside of it with HTML and CSS?

CSS Web Development Front End Technology

To create a responsive navigation menu with a login form inside of it, we use CSS flexbox and media queries to ensure the layout adapts properly across different screen sizes.

Syntax

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: breakpoint) {
    /* Responsive styles */
}

Example

The following example creates a navigation menu with links on the left and a login form on the right −

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navigation with Login Form</title>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
    }
    
    nav {
        width: 100%;
        background-color: #272727;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 1rem;
        min-height: 60px;
    }
    
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .links {
        display: inline-block;
        text-align: center;
        padding: 14px 16px;
        color: #b289fd;
        text-decoration: none;
        font-size: 17px;
        transition: background-color 0.3s;
    }
    
    .links:hover {
        background-color: #646464;
    }
    
    .selected {
        background-color: #00122b;
    }
    
    .login-form {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .login-form input {
        padding: 8px 12px;
        font-size: 16px;
        border: none;
        border-radius: 4px;
        outline: none;
    }
    
    .login-form input[type="submit"] {
        background-color: #b289fd;
        color: white;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .login-form input[type="submit"]:hover {
        background-color: #9a6efc;
    }
    
    @media screen and (max-width: 768px) {
        nav {
            flex-direction: column;
            padding: 1rem;
            align-items: stretch;
        }
        
        .nav-links {
            flex-direction: column;
            width: 100%;
            margin-bottom: 1rem;
        }
        
        .links {
            width: 100%;
            text-align: left;
            border-bottom: 1px solid #444;
        }
        
        .login-form {
            flex-direction: column;
            width: 100%;
            gap: 0.5rem;
        }
        
        .login-form input {
            width: 100%;
            box-sizing: border-box;
        }
    }
</style>
</head>
<body>
<nav>
    <div class="nav-links">
        <a class="links selected" href="#">Home</a>
        <a class="links" href="#">About</a>
        <a class="links" href="#">Services</a>
        <a class="links" href="#">Contact</a>
    </div>
    <form class="login-form">
        <input type="text" placeholder="Username" required />
        <input type="password" placeholder="Password" required />
        <input type="submit" value="Login" />
    </form>
</nav>

<div style="padding: 2rem;">
    <h1>Welcome to Our Website</h1>
    <p>This is a responsive navigation menu with an integrated login form. Try resizing your browser window to see how it adapts to different screen sizes.</p>
</div>
</body>
</html>

Output

A dark navigation bar appears with navigation links on the left and a login form on the right. On desktop, the form appears horizontally aligned. On mobile devices (below 768px width), the navigation stacks vertically with the login form appearing below the navigation links.

Key Features

  • Flexbox Layout: Uses CSS flexbox for flexible and responsive positioning
  • Mobile-First Design: Stacks elements vertically on smaller screens
  • Smooth Transitions: Hover effects with CSS transitions for better user experience
  • Form Integration: Complete login form with username, password, and submit button
  • Responsive Breakpoint: Switches layout at 768px width for optimal mobile viewing

Conclusion

This responsive navigation menu combines modern CSS flexbox techniques with media queries to create a user-friendly interface. The design seamlessly adapts from horizontal desktop layout to vertical mobile layout while maintaining the login functionality.

Updated on: 2026-03-15T14:40:16+05:30

582 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements