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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
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… Continue Reading
