Adding Animated Hamburger Mobile Menu to Qode Bridge Theme

UPDATED:

  • March 8 2021 – Corrected path error in Step 4
  • Jan 6 2021 – updated CSS

 

The Qode Bridge theme has many beautiful animations but it doesn’t include any options for animating the mobile hamburger menu.

In this post we look at how to add some light weight animation to the mobile menu using the Tasty CSS-animated Hamburger menus you can see here: https://jonsuh.com/hamburgers/

STEP 1: Adding the hamburger menu files

  • Download all of the hamburger menu files from Github: https://github.com/jonsuh/hamburgers
  • Unzip the folder
  • Connect to your site via FTP
  • Upload the unzipped folder into /wp-content/themes/bridge-child/

STEP 2: Add the Hamburger Stylesheet to your Site

We need to add a snippet of code to functions.php to load the stylesheet we just added.

Open up /wp-content/themes/bridge-child/functions.php and add the following:

function hamburger_scripts() {
wp_register_style('hamburger-style', get_stylesheet_directory_uri() . '/hamburgers-master/dist/hamburgers.css');
wp_enqueue_style('hamburger-style');
}
add_action('wp_enqueue_scripts', 'hamburger_scripts', 11);

Where you see /hamburgers-master/dist/hamburgers.css make sure this matches the name of the directory you just uploaded. Depending on how you unzipped and uploaded it, you might need to use the folder structure /hamburgers-master/hamburgers-master/dist/hamburgers.css

STEP 3: Add Custom jQuery

  • In the backend of your website, click on Qode Options -> General in the WordPress side menu.
  • Scroll down to the Custom JS section and paste in the following code:
    /*
    **	Show/Hide Mobile menu
    */
    function initMobileMenu(){
    	"use strict";
    
    	$j(".hamburger").on('tap click', function(e){
            e.preventDefault();
      var hamburger = $j(".hamburger");
        hamburger.toggleClass("is-active");
    
            if ($j(".mobile_menu > ul").is(":visible")){
    			$j(".mobile_menu > ul").slideUp(200);
    		} else {
    			$j(".mobile_menu > ul").slideDown(200);
    		}
    	});
    
    	$j(".mobile_menu > ul > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > h3, .mobile_menu > ul > li.has_sub > a[href*='#']").on('tap click', function(e){
            e.preventDefault();
    
            if ($j(this).closest('li.has_sub').find("> ul.sub_menu").is(":visible")){
    			$j(this).closest('li.has_sub').find("> ul.sub_menu").slideUp(200);
    			$j(this).closest('li.has_sub').removeClass('open_sub');
    		} else {
    			$j(this).closest('li.has_sub').addClass('open_sub');
    			$j(this).closest('li.has_sub').find("> ul.sub_menu").slideDown(200);
    		}
    	});
    
    	$j(".mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > span.mobile_arrow, .mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > h3, .mobile_menu > ul > li.has_sub > ul.sub_menu > li.has_sub > a[href*='#']").on('tap click', function(e){
            e.preventDefault();
    
            if ($j(this).parent().find("ul.sub_menu").is(":visible")){
    			$j(this).parent().find("ul.sub_menu").slideUp(200);
    			$j(this).parent().removeClass('open_sub');
    		} else {
    			$j(this).parent().addClass('open_sub');
    			$j(this).parent().find("ul.sub_menu").slideDown(200);
    		}
    	});
    
    	$j(".mobile_menu ul li > a, .q_logo a").on(' tap click', function(){
            if(($j(this).attr('href') !== "http://#") && ($j(this).attr('href') !== "#")){
                $j(".mobile_menu > ul").slideUp();
      var hamburger = $j(".hamburger");
        hamburger.toggleClass("is-active");
    
    		}
    
    	});
    }

STEP 4: Modify Header Code

  • Copy the header code from the parent theme into the child theme to overwrite it. We need to copy:
    /wp-content/themes/bridge/framework/modules/header/templates/mobile-menu/mobile-menu-button.php
    to
    /wp-content/themes/bridge-child/framework/modules/header/templates/mobile-menu/mobile-menu-button.php
  • Connect to your website via FTP, and navigate to /wp-content/themes/bridge/framework/modules/header/templates/mobile-menu/mobile-menu-button.php
  • Download the mobile-menu-button.php file.
  • Still connected by FTP, navigate to /wp-content/themes/bridge-child/ and in this folder, create the directoriesย  /framework/modules/header/templates/mobile-menu/
  • Once you have the directories created, upload mobile-menu-button.php to the mobile-menu folder in the child theme.
  • Open /wp-content/themes/bridge-child/framework/modules/header/templates/mobile-menu/mobile-menu-button.php and erase everything in the file. Add this to the file:
    <?php if(bridge_qode_is_main_menu_set()) { ?> 
       <div class="hamburger hamburger--emphatic"> 
            <div class="hamburger-box"> 
               <div class="hamburger-inner"></div> 
       </div> 
       </div> 
    <?php } ?>

    Notice the class hamburger–emphatic in the code above – you can replace emphatic with any of the styles you see here: https://jonsuh.com/hamburgers/

  • Save the changes you make to the file and update the file on the server.

OPTIONAL STEP 5: Add Custom CSS

  • Add the following CSS to your stylesheet:
    .hamburger {
       display: none;
    }
    @media only screen and (max-width: 1000px) {
    .hamburger { display: inline-block !important; float: right; line-height: 70px !important; padding-right: 0 !important;}
    .hamburger:focus { outline: none;} /* Optional */
    }
    

    The important part of this code is the line-height attribute, which may need to be adjusted depending on your header style. These are the modifications I found necessary for my use to make it look “normal”.

    I also want to add that “float: right;” will move the menu to the right side of the screen. By default it’s positioned at the left side, and you can exclude this if you want it to stay on the left.

Related Posts

8 thoughts on “Adding Animated Hamburger Mobile Menu to Qode Bridge Theme

  1. Thanks for your post.

    You forgort to hide the hamburger menu on desktop:

    @media only screen and (min-width: 1000px) {
    .hamburger.hamburger–emphatic {display: none;}
    }

  2. Great explanation. But I am not getting the animation when I click on the hamburger :/
    Cache problem?
    Also, to make your post 100% ๐Ÿ˜Š, you can add “themes/” before “bridge” and “bridge-child”, in step 4.

  3. Awesome post, just what I was looking for. ๐Ÿ™‚
    However the animation doesn’t seem to work for me, I uploaded all the files via FTP and then checked the theme-editor and Bridge-child. Then it looks like the folder lib with the .rb files isn’t there. Even though it exists according to the file-manager. Is that the case for you as well, that the .rb files aren’t visible in the theme-editor?

    1. I just checked and I didn’t even upload the library folder myself. The rb files look like they are ruby on rails files – for Shopify maybe. All you really need is /dist/hamburgers.css – so check your source code and make sure that’s loading properly. Then, check your jquery trigger classes to make sure they align!

      Good luck ๐Ÿ™‚

Leave a Reply

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