Adding custom menu after header in Beaver Builder Theme

Sometimes client is wanting the two menus: one at right side of the logo and another one will be under the header. Therefore I spent few hours and displaying the custom menu after header in Beaver Builder theme (see the above video). I did following things:

  1. Register new menu location
  2. Create a menu and assign it inot new location
  3. Displaying the menu after header
  4. Add custom CSS
  5. Add responsive effect
Before editing the files you’ll keep a backup of your child theme

Registering after header menu location

Open the functions.php file and add this snippet. I used after_setup_theme hook and registering the menu location with WordPress register_nav_menus function.

Register new menu location

add_action( 'after_setup_theme', 'bw_register_menu_location' );
/**
 * Register new menu location
 */ 
function bw_register_menu_location( ) {
  //* Nav menus
  register_nav_menus(array(
    'after-header'  => __('After Header Menu', 'fl-automator'),
  ));
}

Now login to Dashboard and navigate to Appearance -> Menus. Select the existing menu or create a new one and assign it to “After Header Menu” location.

Displaying the menu after Header bar

Again open the functions.php file and add the following snippets. Beaver Builder theme have a hook “fl_after_header”. I targeted this hook. If any contents are already displaying using this hook on your site, then you will adjust the hook’s priority for proper placement. Current priority is 10.

Adding the menu after header

add_action( 'fl_after_header', 'bw_after_header_menu' );
/**
 * Adding the menu after header
 */ 
function bw_after_header_menu() {
  //* Do nothing if menu not supported
	if ( ! has_nav_menu( 'after-header' ) )
		return;
?>


  

    
  



 }

Styling the Menu

Adding some custom CSS in style.css file for better look. You will adjust the background color, font size, color etc as per your site design.

Styling the menu

/*
 After Header Nav
==================================================== */

.fl-after-header-nav-wrap {
  background: #333;
}

.fl-after-header-nav-wrap .navbar-collapse {
  padding: 0;
}

.navbar-after-header .navbar-nav > li > a,
.navbar-after-header ul.sub-menu > li > a {
  color: #fff;
  margin: 0;
}

.navbar-after-header .navbar-nav > li > a {
  line-height: 1.4;
  padding: 30px 25px 25px;
}

.navbar-after-header .navbar-nav > li:hover > a,
.navbar-after-header .navbar-nav > li > a:hover,
.navbar-after-header .navbar-nav > li > a:focus,
.navbar-after-header .navbar-nav > li.current-menu-item > a {
  background: #555;
  color: #fff;
}

.navbar-after-header .navbar-toggle,
.navbar-after-header .navbar-toggle:hover,
.navbar-after-header .navbar-toggle:focus {
  background: transparent;
  padding: 15px 0;
}

.navbar-after-header .navbar-toggle *,
.navbar-after-header .navbar-toggle:hover,
.navbar-after-header .navbar-toggle:focus {
  color: #fff;
}

@media only screen and (min-width: 767px) {
  .navbar-after-header ul.sub-menu {
    background: #555;
    border: none;
    border-right: 1px solid #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
  }
  
  .navbar-after-header ul.sub-menu ul.sub-menu {
    margin-left: 1px;
    padding-bottom: 0;
    top: 0;
  }
  
  .navbar-after-header ul.sub-menu > li:hover > a,
  .navbar-after-header ul.sub-menu > li > a:hover,
  .navbar-after-header ul.sub-menu > li > a:focus,
  .navbar-after-header ul.sub-menu > li.current-menu-item > a {
    background: #737373;
    color: #fff;
  }
  
  .navbar-after-header ul.sub-menu li {
    border-bottom: 1px solid #666;
  }
}

@media only screen and (max-width: 768px) {
  .navbar-after-header .navbar-toggle *,
  .navbar-after-header .navbar-toggle:hover,
  .navbar-after-header .navbar-toggle:focus,
  .navbar-after-header .navbar-toggle.active {
    background: #101010;
    color: #fff;
  }
  
  .fl-after-header-nav-wrap .container {
    padding-left: 0;
    padding-right: 0;
  }
  
  .navbar-after-header .navbar-nav {
    margin: 0;
    width: 100%;
  }
  
  .fl-after-header-nav-collapse ul.sub-menu li a,
  .fl-after-header-nav-collapse ul.navbar-nav > li > a {
    color: #fff;
  }
  
  .fl-after-header-nav-collapse ul.sub-menu > li > a:hover,
  .fl-after-header-nav-collapse ul.sub-menu > li > a:focus,
  .fl-after-header-nav-collapse ul.navbar-nav > li > a:hover,
  .fl-after-header-nav-collapse ul.navbar-nav > li > a:focus,
  .navbar-after-header ul.navbar-nav > li.current-menu-item > a,
  .navbar-after-header ul.sub-menu > li.current-menu-item > a {
    background: #555;
    color: #fff;
  }
  
  .navbar-after-header .navbar-nav > li > a {
    padding: 15px;
  }
  
  .fl-after-header-nav-collapse ul.sub-menu li,
  .navbar-after-header ul.navbar-nav > li {
    border-top: 1px solid #565656;
  }
}

Creating responsive menu

Create a new js file “after.header.menu.js”, add the following code and upload into js folder. This JS file is taking care the responsive menu effect and sub menu drop downs.

Styling the menu

(function($){

  AfterHeaderMenu = {
    init: function()
		{
			this._bind();
		},
    
    _bind: function()
		{
      // Page Nav Drop downs
			if($('.fl-page-nav ul.sub-menu').length != 0) {
				$(window).on('resize.fl-page-nav-sub-menu', $.throttle(500, this._enableAHNavDropDowns));
				FLTheme._setupDropDowns();
				this._enableAHNavDropDowns();
			}
    },
    
    _enableAHNavDropDowns: function()
		{
			var nav      = $('.fl-page-nav .fl-after-header-nav-collapse'),
				navItems   = nav.find('ul li'),
				subToggles = nav.find('li').has('> ul.sub-menu').find('> a'),
				subMenus   = navItems.find('ul.sub-menu');
				
			if( $( '.fl-page-nav .navbar-toggle' ).is( ':visible' ) ) {
				navItems.off('mouseenter mouseleave');
				nav.find('> ul > li').has('ul.sub-menu').find('> a').on('click', FLTheme._navItemClickMobile);
				subToggles.off('click', FLTheme._navSubMenuToggleClick);
			}
			else {
				nav.find('a').off('click', FLTheme._navItemClickMobile);
				nav.removeClass('in').addClass('collapse');
				navItems.removeClass('fl-mobile-sub-menu-open');
				navItems.find('a').width(0).width('auto');
				
				if ( FLTheme._isMobile() ) {
					navItems.hover(function(){}, FLTheme._navItemMouseout);
					subToggles.on('click', FLTheme._navSubMenuToggleClick);
				}
				else {
					navItems.hover(FLTheme._navItemMouseover, FLTheme._navItemMouseout);
				}
			}
		}
  };
  
  $(function(){
    AfterHeaderMenu.init();
  });

})(jQuery);

Open the functions.php file and add this code. It will load the JS file on your site.

Enqueuing the JS file

add_action( 'wp_enqueue_scripts', 'bw_enqueue_after_header_menu_script' );
function bw_enqueue_after_header_menu_script() {
  wp_enqueue_script( 'after-header-menu', get_stylesheet_directory_uri() . '/js/after.header.menu.js', array('jquery'), "1.0", true );
}

Now refresh the home page and see the output.

Posted in