Horje
How to Create a Responsive Login Form in Navbar using CSS?

A Responsive Login form in the Navbar allows users to log in from any page of the website without navigating to a separate login page. This article explains how to create a Responsive Login form within a Navbar using CSS.

Approach

  • Start by creating a <nav> element to contain the navbar.
  • Inside the <nav> create a <div> element for the logo.
  • Then create another <div> for adding the required navigation links using the anchor tag.
  • Add a third <div> for the login form which will contain input fields for username and password and a login button.
  • Add hover effects to links and buttons to enhance interactivity by changing the background color.
  • Style the login form elements and add basic spacing and borders.
  • Use media queries to adjust the layout for smaller screens.
  • For smaller screens, we change the flex-direction of the navbar to a column to stack elements vertically for responsiveness.

Example: Implementation to Create a Responsive Login Form in Navbar using CSS.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Responsive Navbar Login Form</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        h3 {
            margin-top: 20px;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #4CAF50;
            color: white;
            padding: 10px;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
        }

        .logo img {
            width: 50px;
            height: auto;
            margin-right: 10px;
        }

        .nav-links {
            display: flex;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            padding: 6px;
        }

        .login-form {
            display: flex;
        }

        .login-form input {
            padding: 5px;
            margin-right: 10px;
            border: 1px solid #ccc;
        }

        .login-form button {
            padding: 5px 10px;
            border: 1px solid #4CAF50;
            background-color: #757575;
            color: white;
            cursor: pointer;
        }

        .nav-links a:hover {
            background-color: #90ee90;
        }

        .login-form button:hover {
            background-color: #5f5959;
        }

        @media screen and (max-width: 768px) {
            .navbar {
                flex-direction: column;
                align-items: center;
            }

            .nav-links {
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .nav-links a {
                margin-right: 0;
                padding: 6px;
            }

            .nav-links a:hover {
                background-color: #90ee90;
            }

            .login-form button:hover {
                background-color: #5f5959;
            }

            .login-form {
                margin-top: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .login-form input {
                margin-right: 0;
                margin-bottom: 8px;
            }

            .nav-links,
            .login-form {
                width: 100%;
            }

            .nav-links a,
            .login-form input,
            .login-form button {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <div class="logo">
            <img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                alt="Logo">
        </div>
        <div class="nav-links">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
        <div class="login-form">
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
            <button>Login</button>
        </div>
    </nav>
    <h3>Welcome to GeeksForGeeks</h3>
</body>

</html>

Output:

no

 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How to Create Different Overlay Effects using CSS? How to Create Different Overlay Effects using CSS?
How to Create a Navigation Menu with an Input Field Inside it? How to Create a Navigation Menu with an Input Field Inside it?
What is a Breakpoint in Responsive Web Design? What is a Breakpoint in Responsive Web Design?
How to Create a Responsive Navigation Bar with Dropdown? How to Create a Responsive Navigation Bar with Dropdown?
What Skills Should a Front-End Developer Have? What Skills Should a Front-End Developer Have?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 16



 

Horje