Site-logo

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

Thanks David for your cool script to solve my problem. However, I'm not sure with hook is better for this script. It could be "inside-navigation or wp-head"? I want this script works on both mobile and desktop mode whenever users activate search from.

scripts should go in the WP_Footer this ensures the page is loaded before the script fires, otherwise the queried element may not have loaded and the script will fail.

Thanks David,

Perfect code! I succeeded in 1 hit. Thanks David.

Awesome - glad to be of help.