How to move Search Box to header?

Hey there Yazeed,

Hope you’re well today ??

For this you’ll have to make changes to your theme header.php. I’d suggest creating a child theme, then making a copy of header.php there and then making changes in your child theme. By doing this you’ll avoid your changes being lost once you update the theme.

Once you do that you can replace code in header.php with the following one https://pastebin.com/7nNrr87i.

What I did there was simply called get_search_form function and added a holder with specific class which we can later use to move it within the header.

Please let me know when you do this so we can position it with some CSS.

Best regards,
Bojan

Hi dear Bojan :-), happy to see you again, I did what you said, big thanks ?? but can you see how it does look now https://www.wecanboost.com , aligned to center and stuck on the top. I rely on you.

Warmest regards,
Yazeed.

Hi Y

I have seen this requirement quite lots of time and so have blogged about this for hiero theme. You can see the blog here.

hope it helps!!

Thanks

Hey again Yazeed,

Glad to see you again too ??

Please try adding the following:

@media screen and (min-width: 1024px) {
header#masthead .clearfix.container {
    position: relative;
}

.headersearch {
    width: 33%;
    height: 50px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.headersearch label {
    display: inline-block;
}

.headersearch input.search-field {
    margin-bottom: 0;
    padding: 10px;
}
}

@media screen and (max-width: 1023px) {
.headersearch {
    width: auto;
    height: auto;
    position: relative;
    padding: 20px 0 0 10px;
}
}

This should be the result https://screencast.com/t/5xe2PiRO8VT0 ??

Best regards,
Bojan