Adding Search Bar to Header.

[goclimbing]

I'm trying to determine the best approach to including a search box that will center in the header for desktop. I have the search off-canvas implemented but want to limit that to only show the search icon on mobile.

I've done enough custom work to header.php so editing that could be a best approach.

[crftwrk]

I don't think it's necessary to edit the header.php file, because almost everything can be achieved with filters and actions. It just requires a little creativity on how to use them here.

• You can use Top Nav 2 widget position for the search form instead. This will move the search form out of the search collapse and displays it in the navbar on lg screen sizes. Below the lg size it's displayed inside the menu offcanvas. Just add some Bootstrap classes or additional CSS to order the searchform above the menu on mobile view.
• To center the search form, this might be a good starting point: https://bootscore.me/documentation/theme/filter-action-hooks/#add-a-mobile-logo-center-the-logo-and-move-menu-to-left. This will center the logo, but there might be a way to swap the logo with the search form.
• You can use actions to register new widget areas in child-theme as well. Use the visual guide https://bootscore.me/documentation/theme/filter-action-hooks/#visual-guide to see where you can hook in here.