Your cart is currently empty!
Homepage › Community Forums › Epik Theme Support › Add a mobile responsive "toggle" or "hamburger" menu to the Epik theme › Reply To: Add a mobile responsive "toggle" or "hamburger" menu to the Epik theme
I started with the above link and got it working for me. I have the menu in the widget area in the header and have modified it until it worked.
# CSS
Step 1. Place this piece of CSS code below into your theme’s CSS file that’s not inside of a media query.
#mobile-menu {
display: none;
visibility: hidden;
}
Step 2. This next piece of CSS code needs to be inside of a media query. I’ve chosen to switch to the mobile menu icon when the max-width of a browser is 580px.
@media only screen and (max-width: 580px) {
#mobile-menu {
background: url("/wp-content/uploads/2013/12/icon-mobile.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
display: inline-block;
float: center;
height: 30px;
width: 41px;
visibility: visible;
}
#nav_menu-7.widget.widget_nav_menu {
display: none;
}
#text-26.widget.widget_text {
display: none;
}
}
/* Make sure main menu re-appears when scaled up */
@media only screen and (min-width: 581px) {
#nav_menu-7.widget.widget_nav_menu {
display: block !important;
}
#text-26.widget.widget_text {
display: block !important;
}
}<!--formatted-->
Then the script I changed to this
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
/* prepend menu icon */
$('.widget-area.header-widget-area').append('<div id="mobile-menu"></div>');
/* toggle nav */
$("#mobile-menu").on("click", function(){
$("#nav_menu-7.widget.widget_nav_menu").slideToggle();
$("#text-26.widget.widget_text").slideToggle();
$(this).toggleClass("active");
});
});
// ]]></script><!--formatted-->
If you notice, for this example I made 2 widgets toggle together under the menu button.
If you don’t want that, you can take out the references in the CSS
#text-26.widget.widget_text {
display: none;
}
and
#text-26.widget.widget_text {
display: block !important;
}
and in the Script
$("#text-26.widget.widget_text").slideToggle();
<!--formatted-->
Hope that helps someone.
Obviously, you will have to find the relevant CSS id’s to your installation, but they will be something like mine, which were:
#text-26.widget.widget_text
And
#nav_menu-7 .widget .widget_nav_menu