How to customize the default WP search form on prime to match the template demo

[adriendemonta]

Dear Generatepress Team,

First of all thank you so much for the new update. It’s incredible!!!

I need your help. I’m using prime template and since i don’t use Woocommerce for this site, I’d just like to use the default WP search form that I have added into element to replace Prime Woocommerce ajax search form.
This is the code I’m now using :

<?php get_search_form(); ?>

Here is the styling I have now:

.wp-search {
margin-left: 30px;
margin-right: 30px;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}

#masthead .site-branding,
.wp-search {
margin-bottom: 20px;
}

I am trying to style it to get as close as possible to your Prime template but i’m stuck.
I would really appreciate if you could help me there.

Here are two screenshots to give you more details:
https://tinyurl.com/yxghjj9w
https://tinyurl.com/yxfwfe8s

Thank you so much in advance for your help and time. Best, Adrien

[Tom]

Hi there,

Give this CSS a shot:

.wp-search form.search-form {
    display: flex;
}

.wp-search form.search-form label {
    flex-grow: 1;
    padding-right: 5px;
}

.wp-search input[type=search] {
    width: 100%;
    box-sizing: border-box;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[adriendemonta]

Dear Tom,

It worked perfectly!
Thank you so much for taking the time to help me. I really appreciate it.
Best, Adrien.

[Tom]

Glad I could help! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts