askdesign
11/28/2015 - 11:02 PM

How to add MENU to the right of hamburger icon in Executive Pro

JS

/* Step 2
Edit style.css.

Change */

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	background-color: #f2f2f2;
	cursor: pointer;
	display: none;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
	text-align: center;
}

/* to */
/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	background-color: #f2f2f2;
	cursor: pointer;
	display: none;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 15px;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	padding: 10px;
}

.menu-text {
	vertical-align: top;
	display: inline-block;
	margin-top: 7px;
	font-size: 15px;
}
// Before: hamburger icon
// After: hambuger icon followed by word "MENU"

// Step 1
// Edit js/responsive-menu.js.

// Change
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"></div>');

// to
$("header .genesis-nav-menu, .nav-primary .genesis-nav-menu").addClass("responsive-menu").before('<div class="responsive-menu-icon"><span class="menu-text">MENU</span></div>');