Add a mobile responsive "toggle" or "hamburger" menu to the Epik theme

Homepage Community Forums Epik Theme Support Add a mobile responsive "toggle" or "hamburger" menu to the Epik theme

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #9332
    Glade
    Customer

      I’d like to add a mobile responsive toggle menu to the upper right hand corner of my website when viewed on mobile phones. What is the best way to implement this on the Epik theme?

      Thanks!

      #9343
      Eric
      Customer

        I did a quick Google search and came across this – http://www.rvamedia.com/wordpress/collapsible-responsive-menu-for-genesis ….that should help you get it going.


        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        #9597
        pbassham
        Customer

          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

          #9712
          xolotl
          Customer

            Thanks for this detailed post!

            I’ve added code to a stock, current Epik theme and Genesis 2.0.1 just as you have it above (except changing CSS IDs as appropriate) & the targeted menu disappears at screen widths under 580px, but I’m not able to get the hamburger icon to appear.

            I’m seeing the following error and haven’t been able to figure out how the jQuery reference is to be made:

            Uncaught ReferenceError: jQuery is not defined (index):43
            (anonymous function) (index):43
            #9713
            xolotl
            Customer

              FWIW, I finally got the hamburger to appear by adding the following code snippet to epik’s functions.php:

              //* Enqueue mobile header script
              add_action( 'wp_enqueue_scripts', 'lb_mobile_header' );
              function lb_mobile_header() {
                      wp_enqueue_script( 'lb_mobile_header', get_stylesheet_directory_uri() . '/js/lb_mobile_header.js', array( 'jquery' ), '', true );
              }
            Viewing 5 posts - 1 through 5 (of 5 total)
            • You must be logged in to reply to this topic.