Mimicking Volume Search Box on Split

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.

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

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.

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.

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.

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

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