How to move search bar to menu area

Hi asotemil. This thread may provide some helpful information.

Hey, thanks for your tip. I already saw that thread before posting a new one. Solution given there is not exactly what I want.

How it looks after modify header.php using child theme:

1. Normal view – no changes
https://magicaljune.pl/1.jpg

2. When mouse coursor is near search field
https://magicaljune.pl/2.jpg

3. When I click this loop icon
https://magicaljune.pl/3.jpg

4. And finally this is how I’d like to be. Moving whole element into right header position.
https://magicaljune.pl/4.jpg

Is this possible?

Or just let me know how to make this loop icon from 2.jpg file to be visible without getting mouse into that area. Just to be visible always.

Sorry for double post.

OK, here’s a cleaner solution.
1. Remove the previous changes to header.php.

2. Add this function to your child theme functions.php file:

// add search box to main navigation menu
function add_search_box( $items, $args ) {
  if( $args->theme_location == 'header' )
    $items .= '<li>' . get_search_form( false ) . '</li>';
  return $items;
}
add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );

3. Add this css to your child theme style.css. Adjust the margin as needed:

/* float main menu searchbox right */
#header .nav .my-searchbox {
  float: right;
  margin-top: 5px;
}

It’s almost like I want. Please look:

https://magicaljune.pl/

Search box is on the right from menu, but I’d like to see it more on the right as here:
https://magicaljune.pl/4.jpg

Also I want to change border to 1px.

I tried to change some of variables like:

margin-top: 5px;

to

margin-top: 20px; or other value

but this changes nothing

Please tell me what are those numbers (10 and 2) here:

add_filter( ‘wp_nav_menu_items’,’add_search_box’, 10, 2 );

OK, that’s my fault; sorry. Change the line in the function I posted to this:

$items .= '<li class="my-searchbox">' . get_search_form( false ) . '</li>';

Replace the css I posted above with this:

/* float main menu searchbox right */
#nav-header .my-searchbox {
  float: right;
  margin-top: 14px;
}

/* search form black border and wider */
#nav-header .themeform input[type="text"] {
  border: 1px solid #000;
  width: 275px;
}

/* align navigation elements */
#nav-header li {
  display: inline-block;
}

Also, I noticed that you have the same css in both Custom Styles custom.css and your child theme style.css. It should only be in one place. I’d recommend the child theme style.css since you don’t have to back up that file before you update the theme.

OK, that’s my fault; sorry. Change the line in the function I posted to this:

$items .= '<li class="my-searchbox">' . get_search_form( false ) . '</li>';

Replace the css I posted above with this:

/* float main menu searchbox right */
#nav-header .my-searchbox {
  float: right;
  margin-top: 14px;
}

/* search form black border and wider */
#nav-header .themeform input[type="text"] {
  border: 1px solid #000;
  width: 275px;
}

/* align navigation elements */
#nav-header li {
  display: inline-block;
}

The (10, 2) are the $priority and $accepted_args parameters for the add_filter action. You can read more about it in this Codex page.

Also, I noticed that you have the same css in both Custom Styles custom.css and your child theme style.css. It should only be in one place. I’d recommend the child theme style.css since you don’t have to back up that file before you update the theme.

Thank you! I’ve changed border color and width, so now we are almost there. Only one thing left. Please look at page – search box is not aligned to the grey line below it. I’d like search box be aligned to the right. At the moment there is a 15px gap.

You can add a negative margin to pull it to the right:

#nav-header .my-searchbox {
  float: right;
  margin-top: 7px;
  margin-right: -15px;
}

That’s exactly is what I am looking for! Thanks a lot, you do a amazing job here:)

btw. I cleared custom.css, thanks for your advice.

I think this thread can be marked as resolved now.