Creating Responsive Menu in Epik Theme

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.