Search bar transparency in Split theme

Update: I found the option! It was in Colors > Primary Navigation > Navigation Search > Background for those with the same question.

However, the background only hides the primary menu and not the logo, which still makes the search field look weird on mobile when I type a query which starts going over the logo. Any idea how I can make the search bar hide the logo as well when activated?

Not resolved but not as urgent as an other issue I have. Will re-open later.

Sounds good :)

If you do have a solution I'd love to hear it though, I marked as resolved because I could only have one issue open at a time :)

Give this CSS a shot:

.nav-search-active + .site-logo {
    opacity: 0;
}

Thanks Tom! It doesn't do anything. :/

On mobile? Can you link me to your site?

Hi Tom,

It just doesn't do anything at all I think.

I added the URL to the private admin field.

Username: staging_xwbdry
Pwd: 7mgnvVAFAYcd

Thank you!

How about this instead:

.navigation-search.nav-search-active {
    top: 100%;
    border: 1px solid #ddd;
}

It moves the search field below the navigation - border added to help notice the change.

Thanks David! Yes it does move the search field below the navigation, which looks a bit strange as there's now this visible white rectangle on top of the hero section - see screenshot.

Tested again this one:


.nav-search-active + .site-logo {
opacity: 0;
}


It does work on mobile, but not on desktop. Is there a specific class I need to target so it also works on desktop?

Thank you for your help!

You would need to enable the Navigation as Header option in Customizer > Layout > Header - then that code would apply ( or at least be made to work ) - we may need to provide you with some CSS for the centered nav as well.

If you want to enable Navigation as Header we can certainly help :)

Just activated the "Navigation as Header" option and now the menu / logo are all over the place, would love help with the css! Thank you :)

You're welcome - happy to be of help :)

Oops, I mixed up this ticket with the other one. I actually would love to fix that search bar issue. I activated the “Navigation as Header” option and would love help with the css to make it look like it used to without this option checked + have the search bar hide the logo on desktop and mobile. Thank you!