How to Create a Responsive Login Form in Navbar with CSS

This tutorial will show you how to create a responsive login form in the navbar with pure HTML and CSS.

Create HTML

Create a <div> element with a <span class="attribute">class</span> name "nav".
To create menus, include <a> tags in the <span class="property"> XFI3 </span>.
Add another <div> with a <span class="attribute">class</span> name "login-container" and place a <form> element within it.
Use two <input> tags and a <button> tag within the form.

How to create login form with HTML <div>, <form>, <a> tags, <input> "email" type and <button> "submit" type.

<div class="nav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Tutorials</a>
  <div class="login-container">
    <form action="/form/submit" method="POST">
      <label for="email">E-mail</label>
      <input type="email" id="email" placeholder="E-mail" name="e-mail" />
      <label for="password">Password</label>
      <input type="password" id="password" placeholder="Password" name="psw" />
      <button type="submit">Login</button>
    </form>
  </div>
</div>

Add CSS

Style navbar menus by setting the color, padding and font-size.
Center the texts with the text-align property.
Make the elements float to left with the float property and make them block-level elements with the display property.
Use the :active and :hover pseudo-classes of the menus and add the background-color and color properties.
Style the button with padding and margin properties.
Set the background-color, color and font-size. Define the cursor type.
Set the color of the button hover with the <span class="property">background-color</span> property.

How to style login button with CSS padding, margin-top, margin-right, float, background-color, font-size, border, color and cursor properties.

.nav a {
  float: left;
  display: block;
  color: #ffffff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
}

.nav a:hover {
  background-color: #eeeeee;
  color: #000000;
}

.nav a.active {
  background-color: #0e002b;
  color: #ffffff;
}

.nav .login-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background-color: #1c87c9;
  color: white;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.nav .login-container button:hover {
  background-color: #0e002b;
}

Here’s the full example of a responsive login form in navbar with HTML and CSS.

An example of responsive login form in navbar with HTML and CSS.

The @media query detects screens narrower than 600px and switches the layout to a vertical stack by removing floats and setting display: block. This ensures the navbar and login form remain fully usable on mobile devices.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
      }
      .nav {
        overflow: hidden;
        background-color: #939596;
      }
      .nav a {
        float: left;
        display: block;
        color: #ffffff;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 18px;
      }
      .nav a:hover {
        background-color: #eeeeee;
        color: #000000;
      }
      .nav a.active {
        background-color: #0e002b;
        color: #ffffff;
      }
      .nav .login-container {
        float: right;
      }
      .nav input[type=email],
      .nav input[type=password] {
        padding: 6px;
        margin-top: 8px;
        font-size: 17px;
        border: none;
        width: 120px;
      }
      .nav .login-container button {
        float: right;
        padding: 6px 10px;
        margin-top: 8px;
        margin-right: 16px;
        background-color: #1c87c9;
        color: white;
        font-size: 17px;
        border: none;
        cursor: pointer;
      }
      .nav .login-container button:hover {
        background-color: #0e002b;
      }
      @media screen and (max-width: 600px) {
        .nav .login-container {
          float: none;
        }
        .nav a,
        .nav input[type=email],
        .nav .login-container button {
          float: none;
          display: block;
          text-align: left;
          width: 100%;
          margin: 0;
          padding: 14px;
        }
        .nav input[type=email] {
          border: 1px solid #ccc;
        }
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <a class="active" href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Tutorials</a>
      <div class="login-container">
        <form action="/form/submit" method="POST">
          <label for="email">E-mail</label>
          <input type="email" id="email" placeholder="E-mail" name="e-mail" />
          <label for="password">Password</label>
          <input type="password" id="password" placeholder="Password" name="psw" />
          <button type="submit">Login</button>
        </form>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Create HTML

Add CSS

Example of creating a responsive login form in the navbar: