Switch the Divi Nav Style Using JS

divi_nav_switcher.js

/**
* This is a dirty, nasty script. It's vile, and this should probably be done via a WP plugin, but this was quick, and it
* seems to work for what I need. It probably has some bugs and could be more efficient, and I'm open to feedback.
* In short, this script will let you switch navigation styles for Divi-based themes by calling the switchNav function.
* There are five possible styles:
* - default
* - fullscreen
* - slide
* - centered
* - split
* 
* Simply pass one of these strings to the function, and it will switch the nav style. I included an extra function and logic
* to switch the nav style based on the page width on load and when the window is resized, so tweak if desired.
*
* This may not play well with any custom CSS that you have defined, and you may have to tweak things. Also, this hasn't been
* thoroughly tested, so use at your own risk - your mileage may vary.
**/

function switchNav(desired) {
	var current = "";
	var position = "et_header_style_left";

	if (jQuery('body').hasClass('et_header_style_fullscreen')) {
		current = 'fullscreen';
	}
	else if (jQuery('body').hasClass('et_header_style_slide')) {
		current = 'slide';
	}
	else if (jQuery('body').hasClass('et_header_style_centered')) {
		current = 'centered';
	}
	else if (jQuery('body').hasClass('et_header_style_split')) {
		current = 'split'
	}
	else {
		current = 'default';
	}

	if (jQuery('body').hasClass('et_header_style_left')) {
		position = 'et_header_style_left';
	}
	else if (jQuery('body').hasClass('et_header_style_right')) {
		position = 'et_header_style_right';
	}
	if (jQuery(window).width() > 980) {
		var navPadding = 147;
	}
	if (jQuery(window).width() <= 980) {
		var navPadding = 114;
	}


	var nav = jQuery('ul.et_mobile_menu')[0].innerHTML;
	var logo = jQuery('div.logo_container')[0].outerHTML;

	// Gets everything to a flat state
	jQuery('body').removeClass('et_header_style_fullscreen et_header_style_slide et_header_style_centered et_header_style_split et_header_style_left et_header_style_right');
	jQuery('#main-header .logo_container').remove();
	jQuery('#page-container .et_slide_in_menu_container').remove();
	jQuery('nav').remove();
	jQuery('#et_mobile_nav_menu').remove();
	jQuery('ul.et_mobile_menu').remove();
	jQuery('#main-header .et_search_outer').remove();
	jQuery('#et-top-navigation span.mobile_menu_bar').remove();

	jQuery('#page-container').removeAttr('style');
	jQuery('#et-top-navigation').removeAttr('style');
	jQuery('#main-header').attr('data-height-onload', '128');
	jQuery('#main-header').attr('data-fixed-height-onload', '128');
	jQuery('#main-header').css('left', "");


	switch(desired) {
		case 'default':
			jQuery('body').addClass(position);
			jQuery('#main-header .et_menu_container').prepend(logo);
			jQuery('#et-top-navigation').css('padding-left', navPadding + 'px');
			jQuery('#et-top-navigation').prepend('<nav id="top-menu-nav"> \
				<ul id="top-menu" class="nav"> \
					' + nav + ' \
				</ul> \
			</nav> \
			<div id="et_mobile_nav_menu"> \
				<div class="mobile_nav closed"> \
					<span class="select_page">Select Page</span> \
					<span class="mobile_menu_bar mobile_menu_bar_toggle"></span> \
					<ul id="mobile_menu" class="et_mobile_menu"> \
						' + nav + ' \
					</ul> \
				</div> \
			</div>');

			break;
		case 'fullscreen':
			jQuery('body').addClass('et_header_style_fullscreen ' + position);
			jQuery('#page-container').prepend('<div class="et_slide_in_menu_container" style="padding-top: 20px; right: -1017px;"> \
				<span class="mobile_menu_bar et_toggle_fullscreen_menu"></span> \
				<div class="et_pb_fullscreen_nav_container"> \
					<ul id="mobile_menu_slide" class="et_mobile_menu"> \
						' + nav + ' \
					</ul> \
				</div> \
			</div>');
			jQuery('#main-header .et_menu_container').prepend(logo);
			jQuery('#et-top-navigation').css('padding-left', navPadding + 'px');
			jQuery('#et-top-navigation').prepend('<span class="mobile_menu_bar et_pb_header_toggle et_toggle_fullscreen_menu"></span>');

			break;
		case 'slide':
			jQuery('body').addClass('et_header_style_slide ' + position);
			jQuery('#page-container').css('left', '0px');
			jQuery('#main-header').css('left', '0px');
			jQuery('#page-container').prepend('<div class="et_slide_in_menu_container" style="right: -320px; display: none;"> \
				<div class="et_pb_fullscreen_nav_container"> \
					<ul id="mobile_menu_slide" class="et_mobile_menu"> \
						' + nav + ' \
					</ul> \
				</div> \
			</div>');
			jQuery('#main-header .et_menu_container').prepend(logo);
			jQuery('#et-top-navigation').css('padding-left', navPadding + 'px');
			jQuery('#et-top-navigation').prepend('<span class="mobile_menu_bar et_pb_header_toggle et_toggle_slide_menu"></span>');
			jQuery('#main-header').append('<div class="et_search_outer"> \
				<div class="container et_search_form_container"> \
					<form role="search" method="get" class="et-search-form" action="' + window.location.protocol + '//' + window.location.host + '/' + '"> \
						<input type="search" class="et-search-field" placeholder="Search …" value="" name="s" title="Search for:"> </form> \
					<span class="et_close_search_field"></span> \
				</div> \
			</div>');

			break;
		case 'centered':
			jQuery('body').addClass('et_header_style_centered');
			jQuery('#main-header').attr('data-height-onload', '151');
			jQuery('#main-header').attr('data-fixed-height-onload', '151');
			jQuery('#main-header .et_menu_container').prepend(logo);
			jQuery('#et-top-navigation').prepend('<nav id="top-menu-nav"> \
				<ul id="top-menu" class="nav"> \
					' + nav + ' \
				</ul> \
			</nav> \
			<div id="et_mobile_nav_menu"> \
				<div class="mobile_nav closed"> \
					<span class="select_page">Select Page</span> \
					<span class="mobile_menu_bar mobile_menu_bar_toggle"></span> \
					<ul id="mobile_menu" class="et_mobile_menu"> \
						' + nav + ' \
					</ul> \
				</div> \
			</div>');

			break;
		case 'split':
			jQuery('body').addClass('et_header_style_split');
			jQuery('#et-top-navigation').prepend('<nav id="top-menu-nav"> \
				<ul id="top-menu" class="nav"> \
					' + nav + ' \
				</ul> \
			</nav> \
			<div id="et_mobile_nav_menu"> \
				<div class="mobile_nav closed"> \
					<span class="select_page">Select Page</span> \
					<span class="mobile_menu_bar mobile_menu_bar_toggle"></span> \
					<ul id="mobile_menu" class="et_mobile_menu"> \
						' + nav + ' \
					</ul> \
				</div> \
			</div>');

			var navMid = Math.round(jQuery('ul.et_mobile_menu li').length/2);
			jQuery('#top-menu-nav li:nth-child(' + navMid + ')').after('<li class="centered-inline-logo-wrap" style="width: 146.447px;"> \
				' + logo + ' \
			</li>');
			jQuery('#main-header').append('<div class="et_search_outer"> \
				<div class="container et_search_form_container"> \
					<form role="search" method="get" class="et-search-form" action="' + window.location.protocol + '//' + window.location.host + '/' + '"> \
						<input type="search" class="et-search-field" placeholder="Search …" value="" name="s" title="Search for:"> </form> \
					<span class="et_close_search_field"></span> \
				</div> \
			</div>');

			break;
	}
}

var previousWidth = jQuery(window).width();

if (jQuery(window).width() > 980) {
	switchNav('default');
}
else if (jQuery(window).width() <= 980) {
	switchNav('fullscreen');
}

jQuery(window).resize(function(){
	if (jQuery(window).width() > 980 && previousWidth <= 980) {
		switchNav('default');
	}
	else if (jQuery(window).width() < 981 && previousWidth >= 981) {
		switchNav('fullscreen');
	}
	previousWidth = jQuery(window).width();
});