askdesign
11/28/2015 - 10:54 PM

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

Sridhar Katakam

2-style.css
content_copyfile_download
/* Step 2
 Edit style.css.
 a) Change padding: 10px; for .responsive-menu-icon::before to padding: 10px 5px 10px 10px;
 b) Add */
 
 .menu-text {
	vertical-align: top;
	display: inline-block;
	margin-top: 8px;
	font-size: 15px;
	color: #fff;
}
1-responsive-menu.js
content_copyfile_download
// https://sridharkatakam.com/how-to-add-menu-to-the-right-of-hamburger-icon-in-outreach-pro/
// In the past I wrote about adding the word MENU to the hamburger menu icon at responsive breakpoints in Executive Pro, Altitude Pro and Ambiance Pro.

// In this article I share the code for the same in Outreach Pro.

// Before: Hamburger
// After: Hamburger followed by "MENU"

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

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

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