I was working on a client’s site who is using Epik Theme. He requested for responsive menu and I did it by this way.
First create a JS file “responsive-menu.js” and put in “epik/js” folder. Here is the JS code:
jQuery(function(){ jQuery( ".nav-header .sub-menu" ).before( "" ); jQuery(".responsive-menu").on( "click", function() { jQuery( ".header-widget-area .widget_nav_menu" ).fadeToggle(); }); jQuery(".sub-menu-toggle").on( "click", function() { var $this = jQuery( this ); $this.toggleClass( "activated" ); $this.next( ".sub-menu" ).slideToggle(); }); jQuery(window).resize(function() { if ( window.innerWidth > 960 ) { jQuery( ".header-widget-area .widget_nav_menu, .sub-menu" ).css('display', 'block'); }else{ jQuery( ".header-widget-area .widget_nav_menu, .sub-menu" ).css('display', 'none'); } }); });
Adding the Dashicons CSS, responsive-menu.js and creating Responsive Menu markup at header. Add following codes in functions.php file
add_action('genesis_header_right', 'epik_responsive_menu'); function epik_responsive_menu(){ echo '<!-- Responsive Menu --> <div class="responsive-menu hide"> <span class="dashicons dashicons-menu"></span> </div>'; } //Search this 'genesis_sample_google_fonts' and replace the code by this new one function genesis_sample_google_fonts() { wp_enqueue_script( 'minimum-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_style( 'dashicons' ); wp_enqueue_style( 'google-font', '//fonts.googleapis.com/css?family=Open+Sans:300,400,700', array(), PARENT_THEME_VERSION ); }
Adding the following CSS in style.css file
.hide, .sub-menu-toggle { display: none; } @media only screen and (max-width: 960px) { .header-image .site-header, .header-image .site-header .wrap { background-position: left top !important; } .site-header .widget_nav_menu { display: inline-block; width: 100%; } .header-image .site-header .widget-area{ float: none; } .responsive-menu { color: #d2d2d2; cursor: pointer; display: block; margin: 0; padding: 13px 0 0; position: relative; right: 0; text-align: right; top: 0; width: auto; } .responsive-menu .dashicons, .responsive-menu .dashicons-before:before{font-size: 32px; width: 30px; height: 30px;} .header-widget-area .widget_nav_menu{display: none; margin-top: 30px;} .site-header .widget-area{text-align: left;} .site-header .genesis-nav-menu .menu-item{display:block; position: relative;} .site-header .genesis-nav-menu .menu-item:hover {position: relative;} .site-header .genesis-nav-menu a { padding: 15px 0 15px 20px; border-left: none; border-top: 1px solid #4b4b4b; text-align: left; } .site-header .genesis-nav-menu .sub-menu { clear: both; display: none; opacity: 1; filter: alpha(opacity=100); position: static; width: 100%; } .site-header .genesis-nav-menu .sub-menu a, .site-header .genesis-nav-menu .sub-menu li:last-child a { background: none; border-width: 1px 0 0; position: relative; padding-left: 40px; width: auto; } .sub-menu-toggle, .sub-menu-toggle:hover { background: none!important; color: #afafaf!important; display: block; font-size: 12px; font-size: 1.2rem; font-weight: 300; font-family: 'Dashicons'; margin: 0 auto; overflow: hidden; padding: 7px 18px; position: absolute; right: 0; top: 10px; text-align: center; visibility: visible; } .sub-menu-toggle:before { content: "\f347"; font-family: 'Dashicons'; } .sub-menu-toggle.activated:before { content: "\f343"; font-family: 'Dashicons'; } }
Replacing some existing CSS by this new CSS
Go to line no 3985 and replace by this
.content, .content-sidebar-sidebar .content, .content-sidebar-sidebar .content-sidebar-wrap, .sidebar-content-sidebar .content, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content, .sidebar-sidebar-content .content-sidebar-wrap, .wrap { width: 100%; }
Go to line no 3985 and remove this full CSS
.header-image .site-header, .header-image .site-header .wrap { background-position: center top !important; }
Now all are done. Just refresh the home page and you’ll get responsive menu for small devices.