Как создать: форму для входа в меню

Как добавить форму для входа в навигационной панели

Первый шаг - добавление HTML:

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="login-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Username" name="username">
      <input type="text" placeholder="Password" name="psw">
      <button type="submit">Login</button>
    </form>
  </div>
</div>

Второй шаг - добавление CSS:

* {box-sizing: border-box;}
/* Настройка стиля навигационной панели */
.topnav {
  переполнение: скрытое;
  цвет фondo: #e9e9e9;
}
/* Настройка стиля навигационной ссылки */
.topnav a {
  плавающий: левый;
  дисплей: блок;
  цвет: черный;
  текстовый выравнивание: центр;
  отступ: 14px 16px;
  деcoration текста: none;
  размер шрифта: 17px;
}
/* Стиль ссылки при наведении мыши */
.topnav a:hover {
  цвет фondo: #ddd;
  цвет: черный;
}
/* Стиль текущей/активной ссылки */
.topnav a.active {
  цвет фondo: #2196F3;
  цвет: белый;
}
/* Настройка стиля контейнера ввода */
.topnav .login-container {
  плавающий: правый;
}
/* Настройка стиля вводного поля в навигации */
.topnav input[type=text] {
  отступ: 6px;
  верхний отступ: 8px;
  размер шрифта: 17px;
  границы: none;
  ширина: 150px; /* Измените по мере необходимости (но не разрушайте верхнюю навигацию) */
}
/* Настройка стиля кнопки в контейнере ввода */
.topnav .login-container button {
  плавающий: правый;
  отступ: 6px;
  верхний отступ: 8px;
  правый отступ: 16px;
  фondo: #ddd;
  размер шрифта: 17px;
  границы: none;
  курсор: указатель;
}
.topnav .login-container button:hover {
  фondo: #ccc;
}
/* Добавление адаптивности - в маленьких экранах, вертикальное отображение навигации вместо горизонтального */
@media screen and (макс-ширина: 600px) {
  .topnav .login-container {
    плавающий: none;
  }
  .topnav a, .topnav input[type=text], .topnav .login-container button {
    плавающий: none;
    дисплей: блок;
    текстовый выравнивание: левый;
    ширина: 100%;
    границы: 0;
    отступ: 14px;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

Попробуйте сами