[Video] How to customize Header and Navigation in Endless theme. https://sridharkatakam.com/video-how-to-customize-header-and-navigation-in-endless-theme/

gistfile1.js

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

gistfile2.js

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

style.css

/* Site Title and Description
--------------------------------------------- */

/*div.title-area {
	background-color: #ddd;
	background-position: center center !important;
	background-size: 800px 300px !important;
	height: 300px;
	padding-left: 10%;
	padding-top: 190px;
}*/

.site-header {
	padding: 8% 10%;
}

.title-area {
	float: left;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.site-title {
	font-family: Oswald, sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 1;
	/*font-size: 72px;*/
	font-size: 28px;
	text-transform: uppercase;
}

/*.site-title a,
.site-title a:hover {
	color: #fff;
}*/

.site-description {
	display: block;
	height: 0;
	text-indent: -9999px;
}

.site-header .nav-primary {
	float: right;
}

.site-header .genesis-nav-menu {
	padding-left: 0;
	padding-right: 0;
}

.site-header .genesis-nav-menu a {
	margin-top: 0;
	margin-bottom: 0;
}

.menu-text {
	vertical-align: top;
	margin-top: 3px;
	display: inline-block;
	font-size: 18px;
}

@media only screen and (max-width: 799px) {
	.title-area {
		float: none;
		text-align: center;
		margin-bottom: 40px;
	}
	.site-header .nav-primary {
		float: none;
	}
	.site-header .genesis-nav-menu a {
		margin-top: 20px;
		margin-bottom: 20px;
	}
}