[Support request] Mimicking Volume Search Box on Split

Home Forums Support [Support request] Mimicking Volume Search Box on Split

Home Forums Support Mimicking Volume Search Box on Split

  • This topic has 7 replies, 2 voices, and was last updated 2 months ago by Fernando.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2246660
    Andrew

    I’m hoping this CSS request is small enough that it’s something you can offer. If not I may need to find another solution. I really like the way the search box behaves in the Volume site template (both desktop and mobile). Is there an easy way to have that same functionality on the Split Template?

    Thanks,
    Andrew

    #2246667
    Fernando
    Customer Support

    Hi Andrew,

    To clarify, are you wanting to make the search field smaller, and not transparent like the one in Volume?

    Also can you share the link to your site? You may use the Private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Kindly let us know.

    #2246668
    Andrew

    That is Correct smaller and not transparent like the one in Volume.

    #2246672
    Fernando
    Customer Support

    Thank you for clarifying.

    The search field in Volume is small because the navigation area is small.

    The one in split is full width.

    For desktop, here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

    @media (min-width: 1025px) {
        form.search-form.navigation-search.nav-search-active {
            width: 40%;
            left: unset;
            background-color: #fff;
        }
    }

    Your breakpoint is at 1050px so you can replace 1025px with 1050px. Then, you can also modify 40% to your preferred size.

    On smaller screens, your layout is different. May I know how you would like it to appear when the screen goes below 1051px?

    Kindly let us know.

    #2246684
    Andrew

    Wow – you are fantastic! Thanks! I would love it if the search box dropped below the header on the smaller sizes. Providing an example in private info area.

    #2246690
    Fernando
    Customer Support

    I see.

    Here’s another CSS code you may add:

    @media (max-width: 1024px) {
        form.search-form.navigation-search.nav-search-active {
            order:3;
            position:relative;
            border: solid 2px #000;
            border-radius: 3px;
            margin: 0 8px 8px 8px;
        }
        .site-logo.mobile-header-logo {
            top: 0;
        }
    }

    You may replace 1024px with 1050px for it to be appropriate to your breakpoint.

    You may also try altering the values to your preference.

    Kindly let us know if this works.

    #2246697
    Andrew

    Works like a charm. Thank you so much for your support! The support I have gotten from the GeneratePress team has been incredible!

    #2246703
    Fernando
    Customer Support

    You’re welcome Andrew! Glad to be of assistance!

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