Search box under logo and header widgets?

Hi Chris,

1. Go to customizer > layout > header, set header alignment to left.

2. Create a block element, add a search block to the content area, select hookas element type, select after_header_content as hook name.

Once it's done, please link us to your site, so we can see if custom CSS is needed to tweak the layout.

Let me know :)

Hi Ying, thanks for the reply! I followed your instructions and that put the search box underneath the menu. I'll link you the URL info privately.

Hum... the hook doesn't seem like after_header_content, can you make sure it's correct?

Whoops, you were correct, I had the hook set as after_header, not after_header_content.

So it works now?

It does work now, it's showing up to the right of the header widgets. So, custom CSS to move it below that content?

Try this CSS:

.inside-header .wp-block-search {
    width: 100%;
}

.inside-header.grid-container {
    flex-wrap: wrap;
}

.inside-header .wp-block-search__inside-wrapper {
    margin-left: auto;
    margin-right: auto;
}

That worked! Thanks so much for your help.

You are welcome :)

Hi Ying, two more questions for you.

1. I noticed that when I'm checking the site at different device resolutions the search box gets squished. I'd like for the text inside to still be readable on mobile devices. How do I prevent the squishing?
2. Is it possible to replace the [Search] text on the button with an icon instead?

This is what I'm ultimately going for:

Can you link me to the site again? The site info has been erased when the topic was resolved.

Let me know :)

Sure thing!

1. The search widget is set to 25% width, so its width based on the width of the viewport. Try set it to 100%, then add this CSS:

.wp-block-search__inside-wrapper {
    width: 400px;
}

2. Unfortuanly GP has no control over the WP search block. If you want to reach the goal, we can try using get_search_form()function instead of using the WP search block.

Try follow the steps:
1. Set the current block element - hook which holds the search form to draft.

2. Create a hook element, add this code:
<?php get_search_form(); ?>
https://www.screencast.com/t/dWHSkupRIl

3. Add this PHP snippet to change the place holder text:

add_filter( 'generate_search_placeholder','lh_search_placeholder');
function lh_search_placeholder() {
	return 'How we can help? ';
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

4. Once it's done, I can see what CSS is needed.

Please ignore my last reply, I played around with the search block and found that the search text can be easily switched to icon by click on of its setting:
https://www.screencast.com/t/Sxxw34qEROU

So basically, you just need to do the step 1 in my last reply:
1. Try set the search block width to 100%, then add this CSS:

.wp-block-search__inside-wrapper {
    width: 400px;
}