Want to align a search box in a menu

[David Borrink]

I added a function to put a search box in my menu and want it inline with my menu items.

//* add search box to end of menu
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
function theme_menu_extras( $menu, $args ) {

	if ( 'primary' !== $args->theme_location )
		return $menu;

	ob_start();
	get_search_form();
	$search = ob_get_clean();
	$menu  .= '<li class="search menu-item">' . $search . '</li>';

	return $menu;

}

This is being done in Genesis-Sample.

I gave it a li class of menu-item so that it would appear in my line of menu items. It appears to the right of the menu items, but slightly higher in position. About 3 pixels above the height of the other menu items. I want to bring it down to line up with the text of my menus. I add a margin-top of 6px and the item moves down 6px from the top line of the menu, but not closer aligned to the menu items. Those items move further downward from the top of the menu area.

I'm trying justify-content, align-items, and other things and whatever I do, the menu items are not aligning horizontally.

Any ideas?

http://staging1.davidandsallie.com/

[Victor Font]

Just reposition it. You already have a class for .nav-primary .search at line 1216 in style.css. Use that move the search box down:

.nav-primary .search {
    position: relative;
    top: 18px;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[David Borrink]

Victor, Thank you for pointing me in the right direction. I had not considered "position: relative". That did it. Thank you!

[David Borrink]

There's one more thing now. Suddenly when I hover over the search box, it shifts up to where it was. Move out, and it goes back. I added a hover state to the CSS, and that took care of it.

.nav-primary .search, .nav-primary .search:hover {
    position: relative;
    top: 20px;
    }

[Author]

Posts