How to Create Responsive Login Form in Navbar with CSS

Login forms exist apparently on all websites. To create 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 just HTML and CSS.

1. Create HTML

  • Create <div> element with a class name "nav".
  • To create menus include <a> tags in the <div>.
  • Create <input> tags with the type "text" and with the placeholder "E-mail" and "Password".
  • Create <button> tag with the type "submit" for "Login" button.
<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="/action_page.php">
      <input type="text" placeholder="E-mail" name="e-mail">
      <input type="text" placeholder="Password" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

2. Create CSS

  • Style the navbar menus with setting the color of the text, padding, font-size.
  • Center the texts with the text-align property.
  • Make the elements float to left with the floats property and make them block-level elements with the display property.
.nav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
}
  • Style the :active and the :hover of the menus with setting the background-color and the color of the text.
.nav a:hover {
background-color: #eeeeee;
color: #000000;
}
.nav a.active {
background-color: #0e002b;
color: #ffffff;
}
  • Style the button with setting padding and margin.
  • Set the background-color, the color of the text and font-size.
  • Define the type of cursor.
  • Set the color of the button hover with the background-color property.
.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 the responsive login form in navbar with just HTML and CSS:

Example

<!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] {
      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="/action_page.php">
          <input type="text" placeholder="E-mail" name="e-mail">
          <input type="text" placeholder="Password" name="psw">
          <button type="submit">Login</button>
        </form>
      </div>
    </div>
  </body>
</html>

Do you find this helpful?

Related articles