[Resolved] Search bar transparency in Split theme

Home Forums Support Search bar transparency in Split theme

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1265839
    Anne-Laure

    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!

    #1265846
    Anne-Laure

    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?

    #1265955
    Anne-Laure

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

    #1266352
    Tom
    Lead Developer
    Lead Developer
    #1266379
    Anne-Laure

    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 ๐Ÿ™‚

    #1266442
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a shot:

    .nav-search-active + .site-logo {
        opacity: 0;
    }
    #1266455
    Anne-Laure

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

    #1266875
    Tom
    Lead Developer
    Lead Developer

    On mobile? Can you link me to your site?

    #1266891
    Anne-Laure

    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!

    #1267282
    David
    Staff
    Customer Support

    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.

    #1267408
    Anne-Laure

    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!

    #1267623
    David
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #1267640
    Anne-Laure

    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 ๐Ÿ™‚

    #1267645
    David
    Staff
    Customer Support

    You’re welcome – happy to be of help ๐Ÿ™‚

    #1267652
    Anne-Laure

    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!

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