title: How to add search bar inside responsive nav bar when it shrinks to mobile screen
body: <p>I am working on a navigation bar that is not made with bootstrap. I want the search bar and some dropdown menus on the navbar, but my search bar is not working correctly. It is not going inside navbar and making the screen size bigger to smaller like from desktop to mobile</p>
  <p><strong>Every menu is going into responsive menu when the screen size changes, but the search bar is not doing what I want when the size changes. The search bar should also go into that menu where others are going</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  /* Javascript only */
  function mydropdown(element) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i &lt; dropdowns.length; i++) {
      dropdowns[i].classList.remove('show');
    }
    // element.nextSibling is the carriage return… need to go to the next next to point on the dropdown menu
    element.nextSibling.nextSibling.classList.toggle("show");
  }
  
  /* W3Schools function to close the dropdown when clicked outside. */
  window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i &lt; dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {margin:0;font-family:Arial}
  
  .topnav {
    overflow: hidden;
    background-color: #333;
  }
  
  .topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .active {
    background-color: #4CAF50;
    color: white;
  }
  
  .topnav .icon {
    display: none;
  }
  
  
  .topnav a:hover{
    background-color: #555;
    color: white;
  }
  
  
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    cursor: pointer;
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {
    background-color: #ddd;
  }
  
  .show {
    display: block;
  }
  /* Style the input container */
  .topnav .search-container {
    float: right;
  }
  
  /* Style the input field inside the navbar */
  .topnav input[type=text] {
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
  }
  .search-container button {
    float: right;
    padding: 6px;
    margin-top: 8px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
  }
  
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="topnav" id="myTopnav"&gt;
    &lt;a href="#home" class="active"&gt;Home&lt;/a&gt;
    &lt;a href="#news"&gt;News&lt;/a&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;div class="dropdown"&gt;
      &lt;button class="dropbtn" onclick="mydropdown(this)"&gt;Dropdown
      &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
    &lt;/button&gt;
    &lt;div class="dropdown-content" id="myDropdown"&gt;
      &lt;a href="#"&gt;Link 1&lt;/a&gt;
      &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
    &lt;/div&gt;
      &lt;div class="dropdown"&gt;
      &lt;button class="dropbtn" onclick="mydropdown(this)"&gt;Dropdown 2
      &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
    &lt;/button&gt;
    &lt;div class="dropdown-content" id="myDropdown"&gt;
      &lt;a href="#"&gt;jdjd&lt;/a&gt;
      &lt;a href="#"&gt;Link 2&lt;/a&gt;
      &lt;a href="#"&gt;Link 3&lt;/a&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a href="#about"&gt;About&lt;/a&gt;
       &lt;div class="search-container"&gt;
      &lt;form action="/action_page.php"&gt;
        &lt;input type="text" placeholder="Search.." name="search"&gt;
        &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()"&gt;&amp;#9776;&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>