The Genesis Club Pro plugin allows you to set a screen size below which the menus are replaced by the hamburger symbol. And when the hamburger is clicked the menu is revealed.
The screenshot below show 2 hamburger menus; one which is closed and another where the user has clicked the hamburger in order to open the menu.
Note that the website window is on the left. On the right is the desktop background (the waves) and the annotations. We have squeezed the website window down to 360px to simulate a mobile device.
You Can Now Decide How Big A Hamburger You Want
You can now set the size of the hamburger icon – the default size is 2.4rem.
This is about 50% bigger than the icons used by WordPress in the admin menu. We made the default size larger to make it more prominent and easier for the user to click. However it is only a default setting so you can override it as you see fit.
New Bun and A New Burger
The hamburger icon is now constructed using an Icon Font.
In Genesis Club Pro Plugin v4.2 I responded to the introduction of the dashicons font that arrived with WordPress 3.8. Rather than creating the 3-layer hamburger with a single top border and double bottom border I adopted the dashicons character “dashicons-menu”.
This has several advantages over using an hamburger image :
- Scalability: the icon size can be set by overriding the default height, width and font-size attribute
- Color: the color can be set by overriding the color attribute
- Ease: the dashicons font is bundled with WordPress