Pressing image instead of button HTML

Question

I am trying to implement a search button into my website . The button increases and decreases the width of the search input. When I try to decrease the width of the search input (by pressing the search button again), it fails - I think this is because I am pressing the logo instead of the search button.
Maybe there is a way to stop the image being clicked, or maybe move the button to the foreground?

Here is the HTML for the logo:

 <img src="https://www.priview.online/logo.png" class="logo" draggable="false"/>

Here is the HTML for the search bar:

      <div class="navbar">
        <div class="search">
            <input type="text" placeholder="Search for a conspiracy" id="search-input"/>
            <button onclick="document.getElementById('search-input').classList.toggle('searchS')">
                <i class="fas fa-search"></i>
            </button>
        </div><br>
        <button onclick="this.classList.toggle('hamburger-active');document.getElementsByClassName('shown')[0].classList.toggle('linkH')"><div></div><div></div><div></div></button>
        <div class="linkH shown">
            <a href="http://conspiracy.infinityfreeapp.com/about.html">
                About
            </a>
            <a href="http://conspiracy.infinityfreeapp.com/How-to-post-conspiracies.html">
                How To Post</a>
            <a href="http://conspiracy.infinityfreeapp.com/api/">
                API
            </a>
        </div>
    </div>

Here is the CSS:

    .navbar button {
        border: none;
        outline: none;
        background: none;
        transition: all 0.9s;
    }

    .search {
        display: flex;
    }

    .search input { 
        background: transparent;
        width: 0px;
        border: none;
        outline: none;
        border-bottom-style: solid;
        border-bottom-color: rgb(83,0,0,0);
        border-bottom-width: 2px;
        transition: all 1s;
    }
    .search .searchS {
        display: inline-block;
        width: 150px;
        border-bottom-color: rgb(83,0,0,1);
        transition: all 1s;
    }
    .search button i {
        color: rgb(83,0,0);
        font-size: 30px;
    }

Answer 1

Figured it all out, all I had to do was:

    .navbar button {
        border: none;
        outline: none;
        background: none;
        transition: all 0.9s;
        z-index: 1; // <--- Add z-index
    }

This brings the search button to the front, so it is in on top of the image - and therefore clicked before the image!