[Resolved] Site-logo

Home Forums Support Site-logo

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1049382
    An Nguyen

    Hi Team,

    In single post, when search-form’s activated, site-logo is above search-form in main-nav. How can I put it below when search-form is activated?

    Thanks.

    #1049558
    David
    Staff
    Customer Support

    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

    #1049567
    An Nguyen

    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.

    #1049581
    David
    Staff
    Customer Support

    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.

    #1049752
    An Nguyen

    Thanks David,

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

    #1049772
    David
    Staff
    Customer Support

    Awesome – glad to be of help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.