How to Create a Responsive Login Form in Navbar with CSS

Login forms exist apparently on all websites. Creating a login form is very simple in programming with the help of CSS.

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

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

  • Create a <div> element with a class name "nav".
  • To create menus, include <a> tags in the <div>.
  • Add another <div> with a class name "login-container" and place a <form> element within it.
  • Use two <input> tags and a <button> tag within the form.
<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">
      <input type="text" placeholder="E-mail" name="e-mail">
      <input type="text" 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 background-color property.
.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.

Example of creating a responsive login form in the navbar:

<!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=text],
      .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,
        .topnav input[type=text],
        .nav .login-container button {
          float: none;
          display: block;
          text-align: left;
          width: 100%;
          margin: 0;
          padding: 14px;
        }
        .nav input[type=text] {
          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">
          <input type="text" placeholder="E-mail" name="e-mail">
          <input type="password" placeholder="Password" name="psw">
          <button type="submit">Login</button>
        </form>
      </div>
    </div>
  </body>
</html>