[Resolved] Search bar transparency in Split theme

[Anne]

Hi everyone!

I’m trying to make the search bar in the Split theme completely opaque (white) so it’s easier to read what I type when searching for something. Right now when I type something it goes over the menu and the logo which makes it hard to read. I can’t find the setting in the customizer, could someone point me in the right direction?

Thank you!

[Anne]

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?

[Anne]

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

[Tom]

Sounds good 🙂

[Anne]

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 🙂

[Tom]

Give this CSS a shot:

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

[Anne]

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

[Tom]

On mobile? Can you link me to your site?

[Anne]

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!

[David]

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.

[Anne]

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!

[David]

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 🙂

[Anne]

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 🙂

[David]

You’re welcome – happy to be of help 🙂

[Anne]

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!

[Author]

Posts