Assign class name to search form

I have a question regarding the search form. I put the search form in the header, as mentioned in this thread.

My question is if it is possible to give this search form have a different class name as the standard one in the sidebar widget? That way I can hide the one in the sidebar on mobile devices, whilst showing the one at the top of the website on mobile.

Thanks,
Thom

Hi Thom,

I hope you are well today and thank you for your question.

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

Kind Regards,
Movin

Good day!

I can give you the URL of the website (http://www.tcg-groep.nl/), but the problem is not currently displaying, because the website is live and it looks kind of strange to keep it that way. I added a screenshot though, for reference.

I added the following line to header.php:
<?php get_search_form(); ?>

and these lines to style.css:

.form-search {
    margin-bottom: 15px;
}

As you know, the sidebar gets placed under the page content on mobile devices. But this way, the sidebar search widget isn’t immediately accessible for people looking for a particular page. Because of this, i’d like to have a search bar on top of the header (like in the image), but only on mobile devices. I’d like to hide the search bar in the header on computer devices.

I already know of a way to hide the search widget in the sidebar on certain devices, which is via a plugin (Widget Options – The #1 Widget Control Plugin – WordPress plugin | WordPress.org Nederlands).

Thanks for the help so far!
ThomDJ

Instead of adding class name to the form you can add wrapper tag around it and assign the class name to it as following.

<div class="header-search-from">
<?php get_search_form(); ?>
</div>

This worked excellently, thanks a lot!
Have a happy New Year!

You are most welcome here :slight_smile: