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!