Hi there,
z-index only works relative to its parent container, so you cannot move the search form in front of the logo as they are both child elements of separate containers. You can try this Javascript which will toggle the hidden
class to the logo when the search icon is clicked:
<script type="text/javascript">
const openSearch = document.querySelector(".main-navigation li.search-item");
const hideLogo = document.querySelector(".site-logo");
openSearch.addEventListener("click", ()=>{
hideLogo.classList.toggle("hidden");
});
</script>
You can then use the .site-logo.hidden
class to style it