This article shows you how to code a hamburger menu for the Genesis framework. If you haven’t time for coding, we’ve made a Genesis plugin that does it. You can choose from a FREE PLUGIN and a PRO PLUGIN does a LOT more very cool stuff.
Genesis
Hamburger
Menus
In the Genesis Minimum Pro theme there is an implementation of a the “hamburger” mobile responsive menu.
However, it has a number of limitations:
- The hamburger icon can be applied to only a single menu
- The device threshold at which the hamburger appears is fixed at 768px
- It requires the “Icon” font family
I decided to build a responsive menu facility into the Genesis Club Plugin that addresses all these issues.
How To Make A Hamburger
First step was to do some research. I can across this post which looked at the various techniques for creating the three line menu navigation icon. The recipes included a simple icon, a CSS pseudo element, box shadows, double borders and CSS gradients. My preferred solution was Mr Robson’s “pseudo border” which has a double border at the top and a single border at the bottom which creates the three lines that form the hamburger.
[code lang=”css”]
.border-menu {
position: relative;
padding-left: 1.25em;
}
.border-menu:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
width: 1em;
height: 0.125em;
border-top: 0.375em double #000;
border-bottom: 0.125em solid #000;
}
[/code]
Next step was to be able to set the color automatically in javascript so the hamburger could use the colors of the menu it was replacing. This saves the user having to set the color of each hamburger manually on each menu. But there was a problem: further research indicated that pseudo element attributes could not be modified in Javascript.
My Own Recipe
I decided to keep the double border but ditch the pseudo element part and the absolute positioning. A simple DIV element would suffice. The responsive_menu_icon_color is a parameterised value passed in by the plugin and optionally set by the user. The other parameter set by the user is minimum_device_width which sets the threshold at which the hamburger appears and the menu disappears. The hamburger menu remains invisible until activated at the specified device threshold by the media query below which hides the main menu and reveals the hamburger icon.
Hamburger Menu CSS With Media Query
[code lang=”css”]
.border-menu {
display: inline-block; content: ""; cursor: pointer;
margin: 0.5em; font-size: 1.5em; width: 1em; height: 0.125em;
border-top: 0.375em double {$responsive_menu_icon_color};
border-bottom: 0.125em solid {$responsive_menu_icon_color};
}
@media only screen and (max-width: {$minimum_device_width}) {
.gc-responsive-menu { display: none; }
.gc-responsive-menu-icon { display: block; }
}
[/code]
With this approach I can offer the user the possibility to fix the hamburger icon color, or have it set dynamically according to the menu it replaces.
Hamburger Menu Javascript With Dynamic Color Option
[code lang=”js”]
jQuery(document).ready(function($){
$(".genesis-nav-menu").addClass("gc-responsive-menu").before(‘<div class="gc-responsive-menu-icon"><div class="border-menu"></div></div>’);
$(".gc-responsive-menu-icon").click(function(){ $(this).next().slideToggle();});
$(window).resize(function(){ if(window.innerWidth > {$minimum_device_width}) { $(".genesis-nav-menu").removeAttr("style");}});
if ({$dynamic_color}) {
$(".gc-responsive-menu-icon").each( function(index) {
var color = $(this).next().find(‘a:first-child’).css(‘color’);
$(this).find(‘.border-menu’).css("border-bottom-color",color).css("border-top-color",color);
});
}
});
[/code]
The above Javascript snippet adds a hamburger icon above each menu, which when clicked slides the menu open. If the user chooses the “dynamic color” option by not specifying any default color, then the hamburger color is determined by the color of the first link text in the menu.
A WordPress Plugin For Genesis Users
We’ve created a plugin specifically for Genesis – there are two versions, both free and premium. Both include the hamburger facility.
Plugin Settings For Hamburger Menu
The Genesis Club Plugin Display menu has a new section called Responsive Menu where you can specify:
- Device threshold at which hamburger menu is activated
- The hamburger color, or leave blank to have the color set automatically based on the menu link color
The responsive menu hamburger feature is available in both the Genesis Club Lite plugin and the Genesis Club Pro Plugin.
The responsive menu is coded efficiently in that if you do not specify a minimum device threshold then no CSS and Javascript is loaded.
