1) Install and activate WP Nav Plus plugin
WP Nav Plus has been designed to fill gaps in the WordPress menu system which make it difficult to accomplish many popular website design patterns.
2) Add this snippet to functions.php
//Remove original genesis header remove_action('genesis_header','genesis_do_header'); //Crate Left / Right menu widget areas genesis_register_sidebar( array( 'id' => 'header-left-menu', 'name' => __( 'Header Left Nav Menu', 'wpflames' ), ) ); genesis_register_sidebar( array( 'id' => 'header-right-menu', 'name' => __( 'Header Right Nav Menu', 'wpflames' ), ) ); //Create the function that split the navigation around centered logo function wpflames_header_widgets() { if ( is_active_sidebar( 'header-left-menu' ) || is_active_sidebar( 'header-right-menu' ) ) { echo '<div class="row">'; genesis_widget_area( 'header-left-menu', array( 'before' => '<div class="col-lg-5 header-nav-menu header-left-menu">', 'after' => '</div>', ) ); echo ' <div class="col-lg-2 logo"> <img src="YOUR_IMAGE_SOURCE" alt=""> </div>'; genesis_widget_area( 'header-right-menu', array( 'before' => '<div class="col-lg-5 header-nav-menu header-right-menu">', 'after' => '</div>', ) ); echo '</div>'; } } add_action( 'genesis_header', 'wpflames_header_widgets' ); function remove_hamburger_menu_from_desktop(){ if(!wp_is_mobile()){ remove_action( 'genesis_header', 'genesis_do_nav', 12 ); } } add_action('init', 'remove_hamburger_menu_from_desktop');
3) CSS
/*ONLY MOBILE*/ @media (max-width: 768px) { .header-left-menu, .header-right-menu { display: none; } } @media (min-width: 768px) { #menu-left-menu, #menu-right-menu { display: flex; justify-content: space-evenly; } }
Leave a Reply