Search box on top of the featured image

Hi there,

Do you want that on all pages?

Let me know :)

Hi Leo,

the website will open with a big picture in the middle and we want to have a big and beautiful :) search bar on it. On the other pages the search bar will be located in a widget together with some filter options.

I think the best way would be to turn search into shortcode:
https://generatepress.com/forums/topic/search-form-within-a-page-possible/#post-280649

Then use our page header add-on:
https://docs.generatepress.com/article/page-header-overview/

Let me know :)

Hi Leo,

what am I suppose to do with the code?

Add it using one of these methods: https://docs.generatepress.com/article/adding-php/

Code Snippets is the easiest if you aren't using a child theme.

It worked. Thank you.

How could I make the search box width bigger and change the "Search" word with something else (form text and button)?

This CSS should work for the width:

.page-header-content input[type=search] {
    width: 300px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

This snippet should change the text:

add_filter('get_search_form', 'my_search_form_text');
function my_search_form_text($text) {
     $text = str_replace('value="Search"', 'value="CUSTOM SEARCH BUTTON TEXT"', $text); //set as value the text you want
     return $text;
}

It worked, thanks.
How can I change also the text from the search box (Search ...)?

This should help: https://docs.generatepress.com/article/generate_search_placeholder/

It works. Thank you, Leo.

The search box looks very small on my mobile. Should I have a different header for mobile? Or what could I do?

Try this CSS:

@media (max-width: 768px) {
    .page-header-content-container {
        padding-left: 0;
        padding-right: 0;
    }
}

Let me know :)

It worked. Thank you.

I have one more. The search box and botton are centered. How could i set the button to be align to right?

You'd have to set a specific width for mobile like this:

@media (max-width: 768px) {
    .page-header-content input[type=search] {
        width: 150px;
    }
}