How can I hide the searchBar in a responsive navbar?

Question

I have a problem with the searchbar not hiding when reducing the size of the window. Maybe there's a better way to solve the problem but hiding the searchbar, however, this is my first webpage project... sorry for the many mistakes!

My intention is to hide the searchbar (or maybe relocate it) so that the new "hamburger" button takes place.

Here you have a snippet of the navbar code:

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

/* Logo resize */
  .logo-container {
    max-width: 0px;
    max-height: 0px;
    margin-bottom: -3px;
    left: 0;
    position: absolute;
  }
  .logo {
    width: 180px;
    height: 48.5px;
    object-fit: cover;
    object-position: 50% 42%;
  }

  /* Add a black background color to the top navigation */
  .topnav {
    background-color: #333;
    margin-top: 130px;
    overflow: hidden;
    margin-right: -10px;
    margin-left: -10px;
    
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    float: left;
    position: relative;
    left: 42%;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: rgb(228, 228, 228);
    color: rgb(68, 66, 70);
  }
  
  /* Add an active class to highlight the current page */
  .topnav a.active {
    background-color: #616161;
    color: rgb(228, 228, 228);
  }
  
  /* Style the search box inside the navigation bar */
  .topnav input[type=text] {
    float: right;
    position: relative;
    right: 40px;
    padding: 6px 10px;
    border: none;
    margin-top: 10px;
    margin-right: 16px;
    font-size: 17px;
    border-radius: 10px;
  }
  .topnav .search-container button {
    float: right;
    position: absolute;
    right: 15px;
    padding: 6px 10px;
    margin-top: 10px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    border-radius: 50%;
  }
  
  .topnav .search-container button:hover {
    background: #ccc;
    border-radius: 50%;
  }

  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }



  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  @media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {display: none;}
    .topnav a.icon {
      float: right;
      display: block;
    }
  }
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav input[type=text] {
      border: 1px solid #ccc;
    }
  }

<!-- The Navbar -->
    <div class="topnav" id="myTopnav">

        <!-- The logo -->
        <div class="logo-container">
            <img class= "logo" src="https://img.freepik.com/vector-gratis/logo-lorem-ipsum-eslogan-aqui-plantilla-arte-diseno_647943-2.jpg?w=2000" 
                alt="logo">
        </div>

        <!-- The buttons -->
        <a href="#home" class="active">HOME</a>
        <a href="#news">NEWS</a>
        <a href="#history">HISTORY</a>
        <a href="#guide">GUIDE</a>

        <!-- The searchbar -->
        <div class="search-container">
            <form action="/action_page.php">
              <input type="text" placeholder="Search.." name="search">
              <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </div>

        <!-- Responsiveness to small window with a button -->
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
        </a>
    </div>

Sorry again for my mistakes and terrible style... I guess we all start somewhere! hahaha

Thanks in advance!

Answer 1

You could just use a media query(as you already have) and hide the whole div when below a certain viewport

ex:

       @media screen and (max-width: 600px) {
         .search-container {
           display: none;
         }
       }