Navigation Search In Primary Nav - Too Wide

Hi there,

could start with by changing the search bar colors with this CSS:

.navigation-search input[type="search"], .navigation-search input[type="search"]:active, .navigation-search input[type="search"]:focus {
    color: #000;
    background-color: #fff;
}

Adjust the colors to suit.
Resizing and positioning can be a little more tricky. Make the color change and let me know how you would prefer it to be positioned.

Hi David, thank you. That's a very neat solution. And avoids complications.

I've just added the Product Search Widget to the Shop page. Left Hand Side Bar.

https://goodhealthboutique.co.uk/shop/

Works well, but the Button below is right up against the search box. No space between. Is there a setting to fix this? Or can you help solve.

Thanks again

John

Try this:

.woocommerce-product-search {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

@media (max-width: 900px) {
    .woocommerce-product-search {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .woocommerce-product-search > button {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 100%;
                flex: 1 0 100%;
    }
}  

Hi David

Thanks you. That worked in that it has placed the button alongside.Still no gap. But looks better. Seems to be the button and the search box dimensions are pretty large? Is there a way to make it smaller.

John

So do you prefer the solution where the search and button are in-line? Or do you want to keep them stacked? Can do either :)

Hi, given it's in a side bar - and the size of the button I think stacked. With a space between them would be great. Thank you.

So this should do:

.woocommerce-product-search > button {
    margin-top: 5px;
}

Hi David

The button move worked great. However the Search box is the full width of the Sidebar.

Can we shorten the width?

If not will run with button along side. And if we did is it possible to make the button smaller. As the Search box seems to vary height with the button.

Thanks for your help with this.
John

This:

.woocommerce-product-search {
    width: 60%;
}

You may want to wrap it in a media query so it doesn't effect mobile.

Hi David

Great. I've gone with the button underneath and the Search bar at 60%. Not tried the media query wrap but I checked on Mobile / tablet - using Responsinator - and perfectly good solution.

Thanks very much! Search is v important in e commerce. And so relieved to get a solution

Thats great. Glad i could be of help.