🍔Hamburger Menu

In WP Rig Toolkit, the default menu with .svg icons has been replaced by a hamburger menu. This change aims to enhance the user experience on your site.

CSS for hamburger menu can be found at:

📂 assets\css\src\navigation\hamburger-menu.css

Default CSS content (Option 1 below)

/*--------------------------------------------------------------
# Hamburger menu
--------------------------------------------------------------*/

/**
 * The markup can be adjusted in customize_mobile_menu_toggle() function
 * at the /inc/Nav_Menus/Component.php file.
 */

.hamburger {
	cursor: pointer;
	transition-duration: 500ms;
}

.hamburger .meat {
	display: block;
	height: 4px;
	width: 30px;
	margin: 6px 0;
	background-color: #222;
	transition-duration: 300ms;
}

.icon-nav.nav--toggled-on .hamburger {
	transform: translateX(12px);
}

.icon-nav.nav--toggled-on .hamburger .meat:nth-child(1) {
	transform: rotate(45deg) translateY(14px);
}

.icon-nav.nav--toggled-on .hamburger .meat:nth-child(2) {
	opacity: 0;
}

.icon-nav.nav--toggled-on .hamburger .meat:nth-child(3) {
	transform: rotate(-45deg) translateY(-14px);
}

HTML for hamburger menu can be found at:

📂 inc\Nav_Menus\Component.php

Default markup (Option 1 below)

/**
 * Displays the primary navigation menu.
 *
 * @return string Mobile Nav Toggle HTML.
 */
public function customize_mobile_menu_toggle() {
	return '<button class="menu-toggle icon" aria-label="' . esc_html__( 'Open menu', 'wp-rig' ) . '" aria-controls="primary-menu" aria-expanded="false">
			div class="hamburger">
			<span class="meat"></span>
			<span class="meat"></span>
			<span class="meat"></span>
		</div>
	</button>';
}

CodePen Solutions

All these options below are ready for integration with WP Rig Toolkit! Feel free to apply them!

Option 1

Option 2