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( "<button class='sub-menu-toggle' role='button'></button>" );

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');
}
});

});

jQuery(function(){

jQuery( ".nav-header .sub-menu" ).before( "<button class='sub-menu-toggle' role='button'></button>" );

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 );
}

add_action('genesis_header_right', 'epik_responsive_menu');

function epik_responsive_menu(){

echo '

</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'; }
}

.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%;
	}

.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;
	}

.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.

Reader Interactions

Leave a Reply Cancel reply

Search Tutorials