Add Search Icon After Menu using B Themer with the Beaver Theme

Here’s how you can add a search icon after a menu in a header done in the Beaver Theme using Beaver Themer.

Create a Shortcode for the Beaver Builder Search function

add_shortcode( 'bb_search','bb_search_shortcode' );
/* Add Search via shortcode */
function bb_search_shortcode() {
    ob_start();
    FLTheme::nav_search();
    return ob_get_clean();
}

Create the Header in Beaver Themer

Create a new header theme layout in Beaver Themer by adding the menu and a HTML module in a row – in the HTML module add the shortcode made above using [bb_search]

add-shortcode-search-icon

 

Add CSS Classes

To the rowmain-menu-search-row

To the menu column main-menu-col

To the HTML column – main-search-col
 

Turn off Equalize Column Heights

turn-off-equal-columns

 

Add Some CSS

.main-menu-search-row .fl-col-group {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

.main-menu-col {
	width: auto;
}

.main-search-col {
	position: relative;
	top: 5px;
	width: auto;
}

.main-search-col  .fl-page-nav-search {
	display: block;
}

centre-menu-search

Now everything should be centered and also the search icon by default is hidden under 992px, the last CSS rule above overrides that.

1 Comment

  1. Avanti on July 5, 2018 at 4:20 pm

    This feature is really missing in Beaver Builder Menu module.
    Well done, nice work; simple to apply and efficient! 😉

Leave a Comment