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( ".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" );
    $ ".sub-menu" ).slideToggle();
  jQuery(window).resize(function() {     
     if ( window.innerWidth > 960 ) {      
      jQuery( ".header-widget-area .widget_nav_menu, .sub-menu" ).css('display', 'block');              
      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>

//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', '//,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-sidebar-sidebar .content,
	.content-sidebar-sidebar .content-sidebar-wrap,
	.sidebar-content-sidebar .content,
	.sidebar-content-sidebar .content-sidebar-wrap,
	.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.

Share This Article

Subscribe Membership Plan ($9.99/mo)

  • Get full access to all premium tutorials
  • Get Support for the posted content
  • Request for specific how-to tutorials
  • Cancel the subscription at anytime

Reader Interactions

Leave A Reply

Your email address will not be published. Required fields are marked *