Search Bar

Please keep in mind that this is not a custom search system, just a simple search form that connects to the standard WordPress Search. Search functionality is handled by WordPress Core, and the display of search results is handled by your theme

Shortcode format

[ubermenu-search]

How to add a search bar to your menu like the demo

1. Activate Content Overrides in UberMenu > Descriptions, Shortcodes, Widgets > Allow Content Overrides
2. Add a Custom menu item to your menu
3. Set the Navigation Label to ‘Search’ and the URL to ‘#’
4. Check Disable Text
5. Check Disable Link
6. Check Align Menu Item to Right Edge (optional)
7. Add the shortcode to the Content Override textarea

Video Tutorial

Search Bar Customizations

CSS Style Customizations

/* Text Input Box */
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform input#s{
  /* Your styles */
}
/* Go Button */
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform input#searchsubmit{
  /* Your styles */
}

Best practices for customizing the search bar markup

Please note that this is a customization, not a supported feature of UberMenu. This section is intended to point you in the right direction with your customization, but any changes are your responsibility.

Inside the ubermenu.shortcodes.php file, you will find the definition of the ubermenu-search shortcode. If you’d like to make your own version, so that you may customize the HTML, just copy the definition to your theme’s functions.php file, rename the shortcode and function name to create your own shortcode:

function custom_searchform(){

	$placeholder = __( 'Search' , 'ubermenu' );

	$form = '<form class="ubersearch-v2" role="search" method="get" id="searchform-custom" action="' . esc_url( home_url( '/' ) ) . '" >
	<div class="ubersearch"><label class="screen-reader-text" for="s">' . __( 'Search for:' , 'ubermenu' ) . '</label>
	<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="'. $placeholder .'" />
	<input type="submit" id="searchsubmit" value="'. __( 'Go' , 'ubermenu' ) .'" />
	</div>
	</form>';
	
	return $form;
}
add_shortcode('custom-search', 'custom_searchform');

You can change the placeholder text and the Go button within the code.

You can then customize your search bar with CSS using this selector:

#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform-custom input[type="text"]#s{
    /* Your styles here */
}