Instantly share code, notes, and snippets.
Last active
January 2, 2019 19:40
-
Star
0
(0)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
Save summersab/08bfd146fedcd0d67f1f080f9b04a151 to your computer and use it in GitHub Desktop.
Switch the Divi Nav Style Using JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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(); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment