How do you create this kind of menu bar with Beaver Builder Menu module? In this tutorial I am sharing the complete instruction for you. I made the full width menu bar with Beaver Themer add-on and menu module. If you have not Themer add-on, you can still built this type menu bar. WP plugin’s repository have some free plugins (like J7 Header Footer Templates or Beaver Builder Header Footer) which are replacing the default theme header with Beaver Builder Templates.

Creating the Menu & Setting the Menu Module

See the video for setup. It is just an example. You will do extra setup as per your site design.

Editing the functions.php file

By default menu description will not appear on your menu item. You need small piece of code. Open the functions.php file of your active theme and drop this small snippet

Adding the description below the menu item

function probb_nav_description( $item_output, $item, $depth, $args ) {
	if ( ! empty( $item->description ) ) {
		$sep = '
1
1
'; //* Adding the bullet separator
		$nav_item_description = '
' . $item->description . '
'; //* getting the menu description
		$item_output = str_replace( $args->link_after . '', $args->link_after . '' . $sep . $nav_item_description, $item_output );
	}

	return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'probb_nav_description', 10, 4 );

Adding Some Custom CSS

We need some custom CSS for counter and bullet divider. You can various way add the CSS into yours site. I am adding the CSS directly into the style.css file. You can use any free plugin or customizer -> additional css box.

Custom CSS

/*
 Displaying the number above the menu item
 -----------------------------------------------------------*/
ul.menu {
	counter-reset: navCounter;
}

.menu > li {
	counter-increment: navCounter;
}

.menu > li > a {
	letter-spacing: 7px;
}

.menu > li:before {
	content: counters(navCounter, ".", decimal-leading-zero);
	display: block;
	font-family: initial;
	font-size: 16px;
	text-align: center;
}

/*
 Bullet Divider
 -----------------------------------------------------------*/
.bullet-divider {
	font-size: 0;
	margin: 0;
	padding: 0;
	line-height: 1;
	list-style-type: none;
	text-align: center;
}

.bullet-divider li {
	background: #b8d813;
	border: none!important;
	border-radius: 100px;
	display: inline-block;
	font-size: 1px;
	height: 6px;
	margin: 3px 3px 0;
	width: 6px;	
}

/*
 Menu Description
 -----------------------------------------------------------*/
p.menu-item-description {
	color: #555!important;
	font-family: initial;
	font-size: 18px;
	font-weight: 400;
	margin: 5px 0 0;
	padding: 0;
	text-align: center;
	text-transform: capitalize;
}

/*
 Hiding description, number and bullets for iPad, small device
 You can also add your own media quries as per your site design
 -----------------------------------------------------------*/
@media only screen and (max-width: 768px )
{
	.menu > li:before,
	.bullet-divider,
	p.menu-item-description {
		display: none;
	}
}