ਕਿਵੇਂ ਬਣਾਉਣਾ: ਮੇਨੂ ਵਿੱਚ ਇਨਪੁਟ ਫੀਲਡ

ਨੈਵੀਗੇਸ਼ਨ ਬਾਰ ਵਿੱਚ ਇਨਪੁਟ ਫੀਲਡ ਕਿਵੇਂ ਜੋੜਣਾ ਹੈ

第一步 - ਐਡਜ਼ ਹੈਲਕਾ

<div class="topnav">
  <a class="active" href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

ਦੂਜਾ ਕਦਮ - ਐਡ ਸਿਐਸਐਸ:

* {ਬਾਕਸ-ਸਾਈਜ਼ਿੰਗ: ਬੋਰਡਰ-ਬਾਕਸ;}
/* ਨੇਵੀਗੇਸ਼ਨ ਪੈਨਲ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav {
  ਓਵਰਫਲੌਅ: ਹਾਈਡ;
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: #e9e9e9;
}
/* ਨੇਵੀਗੇਸ਼ਨ ਪੈਨਲ ਦੇ ਲਿੰਕ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav a {
  ਫਲੌਟ: ਖੱਬੇ;
  ਡਿਸਪਲੇਸ਼ਨ: ਬਲਾਕ;
  ਰੰਗ: black;
  ਟੈਕਸਟ-ਅਲਾਇਨ: ਸੈਂਟਰ;
  ਪੈਡਿੰਗ: 14 16ਪਿਕਸਲ;
  ਟੈਕਸਟ-ਡੈਕੋਰੇਸ਼ਨ: ਨਾਨੋ;
  ਫੋਂਟ-ਸਾਈਜ਼: 17ਪਿਕਸਲ;
}
/* ਨੇਵੀਗੇਸ਼ਨ ਪੈਨਲ ਦੇ ਲਿੰਕ 'ਤੇ ਮਾਉਸ ਹੋਵੇ ਤੱਕ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav a:hover {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: #ddd;
  ਰੰਗ: black;
}
/* ਮੌਜੂਦਾ/ਸਰਗਰਮ ਲਿੰਕ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav a.active {
  ਬੈਕਗਰਾਊਂਡ-ਕਲਰ: #2196F3;
  ਰੰਗ: white;
}
/* ਸੋਰਚ-ਬਕਸ ਕੰਟੇਨਰ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav .search-container {
  ਫਲੌਟ: ਰਾਈਟ;
}
/* ਨੇਵੀਗੇਸ਼ਨ ਪੈਨਲ ਵਿੱਚ ਇਨਪੁਟ-ਬਕਸ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav input[type=text] {
  ਪੈਡਿੰਗ: 6ਪਿਕਸਲ;
  ਮਾਰਜਿਨ-ਟਾਪ: 8ਪਿਕਸਲ;
  ਫੋਂਟ-ਸਾਈਜ਼: 17ਪਿਕਸਲ;
  ਬਾਰਡਰ: ਨਾਨੋ;
}
/* ਸੋਰਚ-ਬਕਸ ਕੰਟੇਨਰ ਦੇ ਬਟਨ ਦੇ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
.topnav .search-container button {
  ਫਲੌਟ: ਰਾਈਟ;
  ਪੈਡਿੰਗ: 6ਪਿਕਸਲ;
  ਮਾਰਜਿਨ-ਟਾਪ: 8ਪਿਕਸਲ;
  ਮਾਰਜਿਨ-ਰਾਈਟ: 16ਪਿਕਸਲ;
  ਬੈਕਗਰਾਊਂਡ: #ddd;
  ਫੋਂਟ-ਸਾਈਜ਼: 17ਪਿਕਸਲ;
  ਬਾਰਡਰ: ਨਾਨੋ;
  ਕਰਸਰ: ਪਾਇਨਟਰ;
}
.topnav .search-container button:hover {
  ਬੈਕਗਰਾਊਂਡ: #ccc;
}
/* ਪ੍ਰਤੀਕਿਰਿਆਵਾਂ ਜੋੜੋ - ਛੋਟੇ ਸਕਰੀਨਾਂ 'ਤੇ ਨੇਵੀਗੇਸ਼ਨ ਪੈਨਲ ਪਰਿਭਾਸ਼ਿਤ ਹੈ, ਨਹੀਂ ਕਿ ਨਾਲੋਂ */
@media screen and (max-width: 600px) {
  .topnav .search-container {
    ਫਲੌਟ: ਨਾਨੋ;
  }
  .topnav a, .topnav input[type=text], .topnav .search-container button {
    ਫਲੌਟ: ਨਾਨੋ;
    ਡਿਸਪਲੇਸ਼ਨ: ਬਲਾਕ;
    ਟੈਕਸਟ-ਅਲਾਇਨ: ਖੱਬੇ;
    ਵਿਸ਼ਾਲਤਾ: 100%;
    ਮਾਰਜਿਨ: 0;
    ਪੈਡਿੰਗ: 14ਪਿਕਸਲ;
  }
  .topnav input[type=text] {
    border: 1px solid #ccc;
  }
}

亲自试一试