1304 lines
99 KiB
JavaScript
1304 lines
99 KiB
JavaScript
/**
|
|
* This file adds some LIVE to the Customizer live preview. To leverage
|
|
* this, set your custom settings to 'postMessage' and then add your handling
|
|
* here. Your javascript should grab settings from customizer controls, and
|
|
* then make any necessary changes to the page using jQuery.
|
|
*
|
|
* @package Astra Addon
|
|
* @since 1.0.0
|
|
*/
|
|
( function( $ ) {
|
|
|
|
|
|
/**
|
|
* Mobile Header Responsive colors
|
|
*
|
|
* [1]- Mobile Header General colors
|
|
* [2]- Mobile Header Primary menu Responsive colors
|
|
* [3]- Mobile Header Primary menu for Fullscreen Menu style colos
|
|
*/
|
|
//[2] Main Header Spacing for Flyout-Fullscreen when click on the toggle menu button
|
|
astra_responsive_spacing( 'astra-settings[header-spacing]','.ast-flyout-menu-enable.ast-main-header-nav-open .main-header-bar,.ast-fullscreen-menu-enable.ast-main-header-nav-open .main-header-bar', 'padding', [ 'bottom' ] );
|
|
|
|
//[2] Mobile Header Priamry Menu Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-menu-color-responsive]', 'color', '.ast-header-break-point .main-header-menu, .ast-header-break-point .main-header-menu .menu-link, .ast-header-break-point .main-header-menu .menu-item:hover > .ast-menu-toggle, .ast-header-break-point .main-header-menu .menu-item.focus > .ast-menu-toggle, .ast-header-break-point .main-header-menu .current-menu-item > .ast-menu-toggle, .ast-header-break-point .main-header-menu .current-menu-ancestor > .ast-menu-toggle, .ast-header-break-point .ast-header-custom-item, .ast-header-break-point .ast-header-custom-item a, .ast-header-break-point .ast-masthead-custom-menu-items, .ast-header-break-point .ast-masthead-custom-menu-items a, .ast-header-break-point .ast-masthead-custom-menu-items .ast-inline-search form .ast-header-break-point .ast-below-header-merged-responsive .below-header-user-select, .ast-header-break-point .ast-above-header-menu-items, .ast-header-break-point .ast-above-header-menu-items .menu-link, .ast-header-break-point .ast-below-header-menu-items, .ast-header-break-point .ast-below-header-menu-items .menu-link, .ast-header-break-point .ast-below-header-merged-responsive .below-header-user-select .widget, .ast-header-break-point .ast-below-header-merged-responsive .below-header-user-select .widget-title,.ast-flyout-menu-enable.ast-header-break-point .main-header-bar-navigation .close,.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar-navigation .close' );
|
|
|
|
//[2] Mobile Header Priamry Menu BG Color.
|
|
wp.customize( 'astra-settings[primary-menu-bg-obj-responsive]', function( value ) {
|
|
value.bind( function( bg_obj ) {
|
|
if ( jQuery('body').hasClass('ast-fullscreen-menu-enable') || jQuery('body').hasClass('ast-flyout-menu-enable') ) {
|
|
const primaryMenuBgStyle = '.main-header-menu, .ast-header-break-point .main-header-menu, .ast-header-break-point .ast-header-custom-item, .ast-header-break-point .ast-header-sections-navigation, .ast-flyout-menu-enable.ast-header-break-point .main-header-bar-navigation .site-navigation, .ast-flyout-menu-enable.ast-header-break-point .ast-primary-menu-disabled .ast-merge-header-navigation-wrap, .ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar-navigation .site-navigation, .ast-fullscreen-menu-enable.ast-header-break-point.admin-bar.ast-admin-bar-visible .ast-primary-menu-disabled .ast-header-custom-item .ast-merge-header-navigation-wrap { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'primary-menu-bg-obj-responsive', primaryMenuBgStyle, device )
|
|
);
|
|
|
|
var dynamicStyle = '.ast-flyout-menu-enable.ast-header-break-point .main-header-bar-navigation .site-navigation, .ast-flyout-menu-enable.ast-header-break-point .ast-primary-menu-disabled .ast-merge-header-navigation-wrap, .ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar-navigation .site-navigation,.ast-fullscreen-menu-enable.ast-header-break-point.admin-bar.ast-admin-bar-visible .ast-primary-menu-disabled .ast-header-custom-item .ast-merge-header-navigation-wrap{ transition: background 0s;}';
|
|
astra_add_dynamic_css( 'mobile-header-fullscreen-flyout-bg-color', dynamicStyle );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Header Active Link BG Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-menu-a-bg-color-responsive]', 'background-color', '.ast-header-break-point .main-header-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .main-header-menu .menu-item.current-menu-ancestor > .menu-link,.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .menu-item.current-menu-item,.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .menu-item.current-menu-ancestor' );
|
|
|
|
wp.customize( 'astra-settings[primary-menu-a-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .menu-item.current-menu-ancestor > .menu-link';
|
|
dynamicStyle += ' { background-color: transparent;}';
|
|
astra_add_dynamic_css( 'mobile-header-menu-a-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Header Active Link BG Color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-menu-a-bg-color', 'astra-settings[primary-menu-a-bg-color-responsive]', 'background-color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item:hover, .ast-fullscreen-menu-overlay .main-header-menu .menu-item.current-menu-item:hover, .ast-fullscreen-menu-overlay .main-header-menu .menu-item.current-menu-item, .ast-fullscreen-menu-overlay .main-header-menu .menu-item.current-menu-ancestor', 'background-color' );
|
|
|
|
//[2] Mobile Header Active Link Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-menu-a-color-responsive]', 'color', '.ast-header-break-point .main-header-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point .main-header-menu .menu-item.current-menu-item > .ast-menu-toggle, .ast-header-break-point .main-header-menu .menu-item.current-menu-ancestor > .ast-menu-toggle, .ast-header-break-point .main-header-menu .menu-item.current-menu-ancestor > .menu-link' );
|
|
|
|
//[2] Mobile Header Active Link Color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-primary-menu-a-color', 'astra-settings[primary-menu-a-color-responsive]', 'color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item:hover > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item:hover > .ast-menu-toggle' );
|
|
|
|
//[2] Mobile Header Active Link Color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-menu-a-color', 'astra-settings[primary-menu-a-color-responsive]', 'color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.current-menu-item:hover > .menu-link' );
|
|
|
|
//[2] Mobile Header Link Hover Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-menu-h-color-responsive]', 'color', '.ast-header-break-point .main-header-menu .menu-link:hover, .ast-header-break-point .ast-header-custom-item a:hover,.ast-header-break-point .main-header-menu .ast-masthead-custom-menu-items a:hover, .ast-header-break-point .main-header-menu .menu-item:hover > .ast-menu-toggle, .ast-header-break-point .main-header-menu .menu-item.focus > .ast-menu-toggle,.ast-header-break-point .main-header-menu .menu-item:hover > .menu-link, .ast-header-break-point .main-header-menu .menu-item.focus > .menu-link ' );
|
|
|
|
//[2] Primary Submenu.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-submenu-color-responsive]', 'color', '.ast-header-break-point .main-header-menu .sub-menu, .ast-header-break-point .main-header-menu .sub-menu .menu-link, .ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-item *' );
|
|
|
|
//[2] Primary Submenu Hover.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-submenu-h-color-responsive]', 'color', '.ast-header-break-point .main-header-menu .sub-menu .menu-link:hover, .ast-header-break-point .main-header-menu .sub-menu .menu-link:focus,.ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-link:hover, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item.focus > .menu-link, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item:hover > .ast-menu-toggle, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item.focus > .ast-menu-toggle, .ast-fullscreen-menu-overlay .ast-header-sections-navigation .sub-menu .menu-link:hover' );
|
|
|
|
//[2] Primary Submenu Hover.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-submenu-h-color', 'astra-settings[primary-submenu-h-color-responsive]', 'color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-item:hover > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-item:hover > .menu-link' );
|
|
|
|
//[2] Mobile Header Submenu Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-submenu-h-bg-color-responsive]', 'background-color', '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-item:hover, .ast-header-break-point .main-header-menu .sub-menu .menu-link:hover, .ast-header-break-point .main-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-header-break-point .main-header-menu .sub-menu .menu-item.focus > .menu-link,.ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item:hover, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item.focus, .ast-fullscreen-menu-overlay .ast-header-sections-navigation .sub-menu .menu-item:hover, .ast-fullscreen-menu-overlay .ast-header-sections-navigation .sub-menu .menu-item.focus' );
|
|
|
|
wp.customize( 'astra-settings[primary-submenu-h-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-link:hover, .ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-link:focus, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-link:hover, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-fullscreen-menu-overlay .main-header-menu .sub-menu .menu-item.focus > .menu-link, .ast-fullscreen-menu-overlay .ast-header-sections-navigation .sub-menu .menu-link:hover, .ast-fullscreen-menu-overlay .ast-above-header-menu-items .sub-menu .menu-link:hover, .ast-fullscreen-menu-overlay .ast-below-header-menu-items .sub-menu .menu-link:hover { background-color: transparent; }';
|
|
astra_add_dynamic_css( 'mobile-header-submenu-h-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-submenu-h-bg-color', 'astra-settings[primary-submenu-h-bg-color-responsive]', 'background-color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-item:hover' );
|
|
|
|
//[2] Mobile Header Active Link Color.
|
|
astra_color_responsive_css( 'colors-background', 'astra-settings[primary-submenu-a-color-responsive]', 'color', '.ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link,.ast-header-break-point .ast-header-sections-navigation .sub-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-above-header-menu-items .sub-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item.current-menu-item > .menu-link' );
|
|
|
|
//[2] Mobile Header Active Link Color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-submenu-a-color', 'astra-settings[primary-submenu-a-color-responsive]', 'color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link' );
|
|
|
|
//[2] Mobile Header Active Link Background Color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-submenu-a-bg-color', 'astra-settings[primary-submenu-a-bg-color-responsive]', 'background-color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-item.current-menu-item' );
|
|
|
|
//[2] Mobile Header Active Link Background Color.
|
|
astra_color_responsive_css( 'colors-background', 'astra-settings[primary-submenu-a-bg-color-responsive]', 'background-color', '.ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link,.ast-header-break-point .ast-header-sections-navigation .sub-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-above-header-menu-items .sub-menu .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item.current-menu-item > .menu-link, .ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-item,.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-ancestor,.ast-fullscreen-menu-overlay .ast-header-break-point .ast-header-sections-navigation .sub-menu .menu-item.current-menu-item,.ast-fullscreen-menu-overlay .ast-header-break-point .ast-above-header-menu-items .sub-menu .menu-item.current-menu-item,.ast-fullscreen-menu-overlay .ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item.current-menu-item' );
|
|
|
|
wp.customize( 'astra-settings[primary-submenu-a-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-menu-overlay .ast-header-break-point .ast-header-sections-navigation .sub-menu .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-menu-overlay .ast-header-break-point .ast-above-header-menu-items .sub-menu .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-menu-overlay .ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item.current-menu-item > .menu-link { background-color: transparent;}';
|
|
astra_add_dynamic_css( 'mobile-header-submenu-a-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Header Submenu Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-submenu-bg-color-responsive]', 'background-color', '.ast-header-break-point .main-header-menu .sub-menu,.ast-header-break-point .main-header-menu .sub-menu, .ast-header-break-point .ast-header-sections-navigation .sub-menu, .ast-header-break-point .ast-above-header-menu-items .sub-menu, .ast-header-break-point .ast-below-header-menu-items .sub-menu, .ast-header-break-point .main-header-bar .main-header-bar-navigation .menu-item-has-children .sub-menu' );
|
|
|
|
//[2] Mobile Header Primary menu Spacing.
|
|
wp.customize( 'astra-settings[primary-menu-spacing]', function( value ) {
|
|
value.bind( function( padding ) {
|
|
if( padding.desktop.bottom != '' || padding.tablet.bottom != '' || padding.mobile.bottom != '' ) {
|
|
var dynamicStyle = '';
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar .main-header-menu > .menu-item-has-children > .ast-menu-toggle {';
|
|
dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '@media (max-width: 768px) {';
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar .main-header-menu > .menu-item-has-children > .ast-menu-toggle {';
|
|
dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '@media (max-width: 544px) {';
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar .main-header-menu > .menu-item-has-children > .ast-menu-toggle {';
|
|
dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '} ';
|
|
astra_add_dynamic_css( 'header-primary-menu-spacing-toggle-button', dynamicStyle );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
/**
|
|
* Fullscreen Menu style -- Primary Menu Custom changes
|
|
*
|
|
*/
|
|
//[3] Fullscreen Menu style - Primary Menu Active Link color.
|
|
astra_color_responsive_css( 'mobile-header-full-screen-menu', 'astra-settings[primary-menu-a-color-responsive]', 'background-color', '.ast-fullscreen-menu-overlay .main-header-menu .menu-item.current-menu-item, .ast-fullscreen-menu-overlay .main-header-menu .menu-item.current-menu-ancestor' );
|
|
|
|
//[3] Fullscreen Menu Style - Primary Menu Link hover color.
|
|
astra_color_responsive_css( 'mobile-header-full-screen-menu', 'astra-settings[primary-menu-h-color-responsive]', 'color', '.ast-fullscreen-menu-overlay .main-header-menu .menu-link:hover,.ast-fullscreen-menu-overlay .ast-header-custom-item a:hover,.ast-fullscreen-menu-overlay .main-header-menu .menu-item:hover > .menu-link,.ast-fullscreen-menu-overlay .main-header-menu .menu-item.focus > .menu-link,.ast-fullscreen-menu-overlay .ast-header-break-point .ast-header-sections-navigation a:hover,.ast-fullscreen-menu-overlay .ast-header-break-point .ast-header-sections-navigation a:focus' );
|
|
|
|
//[2] Mobile Header Menu Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[primary-menu-h-bg-color-responsive]', 'background-color', '.ast-header-break-point .main-header-menu .menu-link:hover,.ast-header-break-point .ast-header-custom-item a:hover,.ast-header-break-point .main-header-menu .menu-item:hover > .menu-link,.ast-header-break-point .main-header-menu .menu-item.focus > .menu-link' );
|
|
|
|
//[3] Fullscreen Menu -- Primary Menu Link hover bg color.
|
|
astra_color_responsive_css( 'mobile-header-full-screen-menu', 'astra-settings[primary-menu-h-bg-color-responsive]', 'background-color', '.ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .menu-item:hover, .ast-fullscreen-menu-overlay .ast-header-break-point .main-header-menu .menu-item.focus, .ast-fullscreen-menu-overlay .main-header-menu .menu-item:hover, .ast-fullscreen-menu-overlay .ast-header-custom-item li:hover, .ast-fullscreen-menu-overlay .main-header-menu .menu-item:hover, .ast-fullscreen-menu-overlay .main-header-menu .menu-item.focus, .ast-fullscreen-menu-overlay .ast-header-break-point .ast-header-sections-navigation li:hover, .ast-fullscreen-menu-overlay .ast-header-break-point .ast-header-sections-navigation li:focus' );
|
|
|
|
//[3] No Toggle Menu Style - Primary Menu Link hover color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-menu-h-color', 'astra-settings[primary-menu-h-color-responsive]', 'color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item:hover > .menu-link, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item:hover > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item.focus > .menu-link' );
|
|
|
|
//[3] Fullscreen Menu -- Primary Menu Link hover bg color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-menu-h-bg-color', 'astra-settings[primary-menu-h-bg-color-responsive]', 'background-color', '.ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .menu-item:not(.ast-masthead-custom-menu-items):hover, .ast-header-break-point.ast-no-toggle-menu-enable .main-header-menu .sub-menu .menu-item:hover' );
|
|
|
|
/**
|
|
* Mobile Above Header Responsive colors
|
|
*
|
|
* [1]- Mobile Above Header General colors
|
|
* [2]- Mobile Above Header menu Responsive colors
|
|
* [3]- Mobile Above Header menu for Fullscreen Menu style colos
|
|
*/
|
|
//[1] Above Header Toggle Button Style.
|
|
wp.customize( 'astra-settings[mobile-above-header-toggle-btn-style]', function( setting ) {
|
|
setting.bind( function( icon_style ) {
|
|
var buttons = $(document).find('.ast-above-header .menu-toggle');
|
|
buttons.removeClass('ast-above-mobile-menu-buttons-default ast-above-mobile-menu-buttons-fill ast-above-mobile-menu-buttons-outline');
|
|
buttons.addClass( 'ast-above-mobile-menu-buttons-' + icon_style );
|
|
} );
|
|
} );
|
|
|
|
//[1] Above Header Toggle Button Border Radius.
|
|
wp.customize( 'astra-settings[mobile-above-header-toggle-btn-border-radius]', function( setting ) {
|
|
setting.bind( function( border ) {
|
|
|
|
var dynamicStyle = '.ast-header-break-point .ast-above-header .ast-button-wrap .menu-toggle { border-radius: ' + ( parseInt( border ) ) + 'px } ';
|
|
astra_add_dynamic_css( 'mobile-above-header-toggle-btn-border-radius', dynamicStyle );
|
|
|
|
} );
|
|
} );
|
|
|
|
/**
|
|
* [2] Mobile Above Header Menu Background
|
|
*/
|
|
|
|
wp.customize( 'astra-settings[above-header-menu-bg-obj-responsive]', function( value ) {
|
|
value.bind( function( bg_obj ) {
|
|
const primaryMenuBgStyle = '.ast-header-break-point .ast-above-header-menu, .ast-flyout-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap .ast-above-header-navigation,.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'above-header-menu-bg-obj-responsive', primaryMenuBgStyle, device )
|
|
);
|
|
|
|
if ( jQuery('body').hasClass('ast-fullscreen-above-menu-enable') || jQuery('body').hasClass('ast-flyout-above-menu-enable') ) {
|
|
const headerBgStyle = '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap,.ast-flyout-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap .ast-above-header-navigation { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'full-fly-above-header-menu-bg-obj-responsive', headerBgStyle, device )
|
|
);
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Above Header Link hover Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-link-h-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-section .user-select a:hover, .ast-header-break-point .ast-above-header-section .widget a:hover' );
|
|
|
|
//[2] Mobile Above Header Text Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-text-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-section .user-select, .ast-header-break-point .ast-above-header-section .widget, .ast-header-break-point .ast-above-header-section .widget-title' );
|
|
|
|
//[2] Mobile Above Header Link Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-link-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-section .user-select a, .ast-header-break-point .ast-above-header-section .widget a' );
|
|
|
|
//[2] Mobile Above Header Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-menu-h-bg-color-responsive]', 'background-color', '.ast-header-break-point .ast-above-header-navigation a:hover,.ast-header-break-point .ast-above-header-navigation .menu-item:hover > .menu-link, .ast-header-break-point .ast-above-header-navigation .menu-item.focus > .menu-link, .ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation li:hover' );
|
|
|
|
wp.customize( 'astra-settings[above-header-menu-h-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation li:hover a:hover,';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item:hover > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.focus > .menu-link {';
|
|
dynamicStyle += ' background-color: transparent;';
|
|
dynamicStyle += '}';
|
|
astra_add_dynamic_css( 'mobile-above-header-menu-h-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Above Header Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header-no-toggle-above-menu', 'astra-settings[above-header-menu-active-bg-color-responsive]', 'background-color', '.ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle, .ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item:hover > .menu-link,.ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item > .menu-link,.ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor:hover > .menu-link,.ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .menu-link,.ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor:hover > .ast-menu-toggle,.ast-no-toggle-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle');
|
|
|
|
//[2] Mobile Above Header Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-menu-active-bg-color-responsive]', 'background-color', '.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .menu-link,.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item,.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor' );
|
|
|
|
wp.customize( 'astra-settings[above-header-menu-active-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .menu-link';
|
|
dynamicStyle += ' { background-color: transparent;}';
|
|
astra_add_dynamic_css( 'mobile-above-header-menu-a-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Above Header menu colors.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-menu-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-menu, .ast-header-break-point .ast-above-header-navigation a, .ast-header-break-point .ast-above-header-navigation .menu-item.focus > .ast-menu-toggle, .ast-header-break-point .ast-above-header-navigation .current-menu-item > .ast-menu-toggle, .ast-header-break-point .ast-above-header-navigation .current-menu-ancestor > .ast-menu-toggle,.ast-flyout-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap .close,.ast-fullscreen-above-menu-overlay .ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap .close' );
|
|
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-menu-h-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-navigation .menu-link:hover, .ast-header-break-point .ast-above-header-navigation .menu-item:hover > .menu-link, .ast-header-break-point .ast-above-header-navigation .menu-item.focus > .menu-link, .ast-header-break-point .ast-above-header-navigation .menu-item:hover > .ast-menu-toggle, .ast-header-break-point .ast-above-header-navigation .menu-item.focus > .ast-menu-toggle' );
|
|
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-menu-active-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item > .ast-menu-toggle, .ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item > .menu-link, .ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle, .ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-ancestor > .menu-link, .ast-header-break-point .ast-above-header-navigation .menu-item.current-menu-item > .menu-link' );
|
|
|
|
//[2] Mobile Above Header submenu colors.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-submenu-text-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-navigation .sub-menu, .ast-header-break-point .ast-above-header-navigation .sub-menu .menu-link' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-submenu-bg-color-responsive]', 'background-color', '.ast-header-break-point .ast-above-header-section-separated .ast-above-header-navigation .sub-menu, .ast-header-break-point .ast-above-header-menu .sub-menu .menu-item, .ast-header-break-point .ast-above-header-section-separated .ast-above-header-navigation .sub-menu, .ast-header-break-point .ast-above-header-menu .sub-menu' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-submenu-hover-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-header-break-point .ast-above-header-menu .sub-menu .menu-item:focus > .menu-link' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-submenu-bg-hover-color-responsive]', 'background-color', '.ast-header-break-point .ast-above-header-menu .sub-menu .menu-link:hover, .ast-header-break-point .ast-above-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.focus > .menu-link,.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-menu .sub-menu .menu-item:hover' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-submenu-active-color-responsive]', 'color', '.ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[above-header-submenu-active-bg-color-responsive]', 'background-color', '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.current-menu-item, .ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.current-menu-ancestor,.ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point .ast-above-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link' );
|
|
|
|
//[2] Mobile Below Header Menu Spacing.
|
|
wp.customize( 'astra-settings[below-header-menu-spacing]', function( value ) {
|
|
value.bind( function( padding ) {
|
|
if( padding.desktop.bottom != '' || padding.tablet.bottom != '' || padding.mobile.bottom != '' ) {
|
|
var dynamicStyle = '';
|
|
dynamicStyle += '.ast-no-toggle-below-menu-enable .ast-below-header-navigation .ast-below-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-no-toggle-below-menu-enable .ast-below-header-menu-items .ast-below-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item-has-children > .menu-link {';
|
|
dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '@media (max-width: 768px) {';
|
|
dynamicStyle += '.ast-no-toggle-below-menu-enable .ast-below-header-navigation .ast-below-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-no-toggle-below-menu-enable .ast-below-header-menu-items .ast-below-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item-has-children > .menu-link {';
|
|
dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '@media (max-width: 544px) {';
|
|
dynamicStyle += '.ast-no-toggle-below-menu-enable .ast-below-header-navigation .ast-below-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-no-toggle-below-menu-enable .ast-below-header-menu-items .ast-below-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item-has-children > .menu-link {';
|
|
dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '} ';
|
|
astra_add_dynamic_css( 'below-header-menu-spacing-toggle-button', dynamicStyle );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
/**
|
|
* Mobile Below Header Responsive colors
|
|
*
|
|
* [1]- Mobile Below Header General colors
|
|
* [2]- Mobile Below Header menu Responsive colors
|
|
* [3]- Mobile Below Header menu for Fullscreen Menu style colos
|
|
*/
|
|
|
|
/**
|
|
* [2] Mobile Below Header Menu Background
|
|
*/
|
|
/**
|
|
* Below Menu Bg colors & image
|
|
*/
|
|
|
|
/**
|
|
* [2] Mobile Below Header Menu Background
|
|
*/
|
|
/**
|
|
* Below Menu Bg colors & image
|
|
*/
|
|
wp.customize( 'astra-settings[below-header-menu-bg-obj-responsive]', function( value ) {
|
|
value.bind( function( bg_obj ) {
|
|
const primaryMenuBgStyle = ' .ast-header-break-point .ast-below-header-section-separated .ast-below-header-actual-nav { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'below-header-menu-bg-obj-responsive', primaryMenuBgStyle, device )
|
|
);
|
|
|
|
if ( jQuery('body').hasClass('ast-fullscreen-below-menu-enable') || jQuery('body').hasClass('ast-flyout-below-menu-enable') ) {
|
|
const headerBgStyle = '.ast-fullscreen-below-menu-overlay .ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation-wrap,.ast-flyout-below-menu-enable.ast-header-break-point .ast-below-header-navigation-wrap .ast-below-header-actual-nav { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'full-fly-below-header-menu-bg-obj-responsive', headerBgStyle, device )
|
|
);
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Below Header Link hover Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-link-hover-color-responsive]', 'color', '.ast-header-break-point .below-header-user-select a:hover, .ast-header-break-point .below-header-user-select .widget a:hover' );
|
|
|
|
//[2] Mobile Below Header Text Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-text-color-responsive]', 'color', '.ast-header-break-point .below-header-user-select,.ast-header-break-point .below-header-user-select .widget' );
|
|
|
|
//[2] Mobile Below Header Link Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-link-color-responsive]', 'color', '.ast-header-break-point .below-header-user-select a, .ast-header-break-point .below-header-user-select .widget a' );
|
|
|
|
//[2] Mobile Above Header Active Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-current-menu-bg-color-responsive]', 'background-color', '.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-ancestor > .menu-link,.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item,.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-ancestor' );
|
|
|
|
wp.customize( 'astra-settings[below-header-current-menu-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-ancestor > .menu-link';
|
|
dynamicStyle += '{ background-color: transparent; }';
|
|
astra_add_dynamic_css( 'mobile-below-header-current-menu-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Above Header Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-menu-bg-hover-color-responsive]', 'background-color', '.ast-header-break-point .ast-below-header-navigation a:hover,.ast-header-break-point .ast-below-header-navigation .menu-item:hover > .menu-link,.ast-header-break-point .ast-below-header-navigation .menu-item.focus > .menu-link,.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation li:hover' );
|
|
wp.customize( 'astra-settings[below-header-menu-bg-hover-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation li:hover a:hover,';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item:hover > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.focus > .menu-link';
|
|
dynamicStyle += '{ background-color: transparent; }';
|
|
astra_add_dynamic_css( 'mobile-below-header-menu-bg-hover-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[1] Below Header Toggle Button Style
|
|
wp.customize( 'astra-settings[mobile-below-header-toggle-btn-style]', function( setting ) {
|
|
setting.bind( function( icon_style ) {
|
|
var buttons = $(document).find('.ast-below-header .menu-toggle');
|
|
buttons.removeClass('ast-below-mobile-menu-buttons-default ast-below-mobile-menu-buttons-fill ast-below-mobile-menu-buttons-outline');
|
|
buttons.addClass( 'ast-below-mobile-menu-buttons-' + icon_style );
|
|
} );
|
|
} );
|
|
|
|
//[1] Below Header Toggle Button Border Radius.
|
|
wp.customize( 'astra-settings[mobile-below-header-toggle-btn-border-radius]', function( setting ) {
|
|
setting.bind( function( border ) {
|
|
|
|
var dynamicStyle = '.ast-header-break-point .ast-below-header .ast-button-wrap .menu-toggle { border-radius: ' + ( parseInt( border ) ) + 'px } ';
|
|
astra_add_dynamic_css( 'mobile-below-header-toggle-btn-border-radius', dynamicStyle );
|
|
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Below Header Link hover Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-link-hover-color-responsive]', 'color', '.ast-header-break-point .below-header-user-select a:hover, .ast-header-break-point .below-header-user-select .widget a:hover' );
|
|
|
|
//[2] Mobile Below Header Text Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-text-color-responsive]', 'color', '.ast-header-break-point .below-header-user-select,.ast-header-break-point .below-header-user-select .widget' );
|
|
|
|
//[2] Mobile Below Header Link Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-link-color-responsive]', 'color', '.ast-header-break-point .below-header-user-select a, .ast-header-break-point .below-header-user-select .widget a' );
|
|
|
|
//[2] Mobile Above Header Active Link Hover Background Color.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-current-menu-bg-color-responsive]', 'background-color', '.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item > .menu-link,.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-ancestor > .menu-link,.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item,.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-ancestor' );
|
|
|
|
wp.customize( 'astra-settings[below-header-current-menu-bg-color-responsive]', function( value ) {
|
|
value.bind( function( color ) {
|
|
if( '' != color.desktop || '' != color.tablet || '' != color.mobile ) {
|
|
var dynamicStyle = '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item > .menu-link,';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-ancestor > .menu-link';
|
|
dynamicStyle += '{ background-color: transparent; }';
|
|
astra_add_dynamic_css( 'mobile-below-header-current-menu-bg-color', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
//[2] Mobile Below Header menu colors.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-menu-text-color-responsive]', 'color', '.ast-header-break-point .ast-below-header-menu .current-menu-ancestor:hover > .ast-menu-toggle, .ast-header-break-point .ast-below-header-menu .current-menu-ancestor > .ast-menu-toggle, .ast-header-break-point .ast-below-header-menu, .ast-header-break-point .ast-below-header-menu .menu-link, .ast-header-break-point .ast-below-header-menu .menu-item:hover > .ast-menu-toggle, .ast-header-break-point .ast-below-header-menu .menu-item.focus > .ast-menu-toggle, .ast-header-break-point .ast-below-header-menu .current-menu-item > .ast-menu-toggle, .ast-header-break-point .ast-below-header-menu .current-menu-ancestor > .ast-menu-toggle' );
|
|
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-menu-text-hover-color-responsive]', 'color', '.ast-header-break-point .ast-below-header-navigation .menu-link:hover, .ast-header-break-point .ast-below-header-navigation .menu-item:hover > .menu-link, .ast-header-break-point .ast-below-header-navigation .menu-item.focus > .menu-link, .ast-header-break-point .ast-below-header-navigation .menu-item:hover > .ast-menu-toggle, .ast-header-break-point .ast-below-header-navigation .menu-item.focus > .ast-menu-toggle' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-current-menu-text-color-responsive]', 'color', '.ast-header-break-point .ast-below-header-navigation .menu-item.current-menu-item > .menu-link' );
|
|
//[2] Mobile Below Header submenu colors.
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-submenu-text-color-responsive]', 'color', '.ast-header-break-point .ast-below-header-navigation .sub-menu, .ast-header-break-point .ast-below-header-navigation .sub-menu .menu-link' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-submenu-bg-color-responsive]', 'background-color', '.ast-header-break-point .ast-below-header-menu .sub-menu, .ast-header-break-point .ast-below-header-menu .sub-menu' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-submenu-hover-color-responsive]', 'color', '.ast-header-break-point .ast-below-header-menu .sub-menu .menu-item:hover > .menu-link, .ast-header-break-point .ast-below-header-menu .sub-menu .menu-item:focus > .menu-link, .ast-header-break-point .ast-below-header-menu .sub-menu .menu-item:hover > .ast-menu-toggle, .ast-header-break-point .ast-below-header-menu .sub-menu .menu-item:focus > .ast-menu-toggle' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-submenu-bg-hover-color-responsive]', 'background-color', '.ast-below-header .sub-menu .menu-item:hover > .menu-link, .ast-desktop .ast-mega-menu-enabled.ast-below-header-menu .sub-menu .menu-item .menu-link:hover, .ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-menu .sub-menu .menu-item:hover' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-submenu-active-color-responsive]', 'color', '.ast-header-break-point .ast-below-header-menu .sub-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point .ast-below-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link' );
|
|
astra_color_responsive_css( 'mobile-header', 'astra-settings[below-header-submenu-active-bg-color-responsive]', 'background-color', '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-menu .sub-menu .menu-item.current-menu-item, .ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-menu .sub-menu .menu-item.current-menu-ancestor, .ast-header-break-point .ast-below-header-menu .sub-menu .menu-item.current-menu-item > .menu-link, .ast-header-break-point .ast-below-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link' );
|
|
|
|
/**
|
|
* Mobile Header Color
|
|
*/
|
|
|
|
wp.customize( 'astra-settings[mobile-header-menu-all-border]', function( value ) {
|
|
value.bind( function( border ) {
|
|
var color = wp.customize( 'astra-settings[mobile-header-menu-b-color]' ).get();
|
|
var menu_style = wp.customize( 'astra-settings[mobile-menu-style]' ).get();
|
|
|
|
if( '' != border.top || '' != border.right || '' != border.bottom || '' != border.left ) {
|
|
|
|
if( 'fullscreen' === menu_style ) {
|
|
var dynamicStyle = '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu > .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu > .menu-item:not(:first-child):not(:last-child)';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .menu-item.ast-submenu-expanded .sub-menu .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + '0';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
} else if ('no-toggle' === menu_style ) {
|
|
|
|
var dynamicStyle = '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar-navigation ul li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li, .ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > .ast-above-header-menu > .menu-item:last-child, .ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar-navigation ul > li:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li:first-child, .ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'margin-right: -' + border.right + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li > .sub-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'margin-left: -' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
} else{
|
|
var dynamicStyle = '.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .main-navigation ul li a';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
//Custom menu item.
|
|
dynamicStyle += '.ast-header-break-point li.ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-style:solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += 'margin-top:0;';
|
|
dynamicStyle += 'margin-bottom:0;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu,.ast-header-break-point .main-navigation ul li a';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
}
|
|
|
|
astra_add_dynamic_css( 'mobile-header-menu-all-border', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
/**
|
|
* Mobile Above Header Color
|
|
*/
|
|
wp.customize( 'astra-settings[mobile-above-header-menu-all-border]', function( value ) {
|
|
value.bind( function( border ) {
|
|
var color = wp.customize( 'astra-settings[mobile-above-header-menu-b-color]' ).get();
|
|
var menu_style = wp.customize( 'astra-settings[mobile-above-header-menu-style]' ).get();
|
|
|
|
if( '' != border.top || '' != border.right || '' != border.bottom || '' != border.left ) {
|
|
|
|
if( 'fullscreen' === menu_style ) {
|
|
var dynamicStyle = '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu > .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu > .menu-item:not(:first-child):not(:last-child)';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .menu-item.ast-submenu-expanded .sub-menu .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + '0';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
} else if ('no-toggle' === menu_style ) {
|
|
|
|
var dynamicStyle = '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation ul li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation .sub-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > .ast-above-header-menu > .menu-item:last-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation ul > li:first-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-menu-items .sub-menu > .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li:first-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li {';
|
|
dynamicStyle += ' margin-right: -' + border.right + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li > .sub-menu {';
|
|
dynamicStyle += ' margin-left: -' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
} else{
|
|
var dynamicStyle = '.ast-header-break-point .ast-above-header-section-separated .ast-above-header-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
|
|
if( 'no-toggle' === menu_style ) {
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
}
|
|
dynamicStyle += '}';
|
|
|
|
if( 'no-toggle' !== menu_style ) {
|
|
dynamicStyle += '.ast-header-break-point .ast-above-header-navigation ul li a, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:first-child .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:last-child .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
}
|
|
|
|
dynamicStyle += '.ast-header-break-point .ast-above-header-section-separated .ast-above-header-menu,.ast-header-break-point .ast-above-header-navigation ul li a, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:first-child .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:last-child .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
}
|
|
|
|
astra_add_dynamic_css( 'mobile-above-header-menu-all-border', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
|
|
/**
|
|
* Mobile Below Header Color
|
|
*/
|
|
wp.customize( 'astra-settings[mobile-below-header-menu-all-border]', function( value ) {
|
|
value.bind( function( border ) {
|
|
var color = wp.customize( 'astra-settings[mobile-below-header-menu-b-color]' ).get();
|
|
var menu_style = wp.customize( 'astra-settings[mobile-below-header-menu-style]' ).get();
|
|
|
|
if( '' != border.top || '' != border.right || '' != border.bottom || '' != border.left ) {
|
|
|
|
if( 'fullscreen' === menu_style ) {
|
|
var dynamicStyle = '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu > .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu > .menu-item:not(:first-child):not(:last-child)';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .menu-item.ast-submenu-expanded .sub-menu .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + '0;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
} else if ('no-toggle' === menu_style ) {
|
|
var dynamicStyle = '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu .menu-item {';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-actual-nav ul > li:first-child, .ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu-items .sub-menu > .menu-item:first-child {';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header .ast-below-header-menu > .menu-item:last-child {';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-actual-nav .sub-menu .menu-item:last-child,.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-actual-nav ul ul li:last-child {';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item > .sub-menu .menu-item:last-child {';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item {';
|
|
dynamicStyle += 'margin-right: -' + border.right + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item > .sub-menu {';
|
|
dynamicStyle += 'margin-left: -' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
} else{
|
|
var dynamicStyle = '.ast-header-break-point .ast-below-header-section-separated .ast-below-header-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .ast-below-header-actual-nav ul li a, .ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .ast-below-header-section-separated .ast-below-header-menu,.ast-header-break-point .ast-below-header-actual-nav ul li a, .ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
}
|
|
|
|
astra_add_dynamic_css( 'mobile-below-header-menu-all-border', dynamicStyle );
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
|
|
/**
|
|
* Mobile Header Border Color
|
|
*/
|
|
wp.customize( 'astra-settings[mobile-header-menu-b-color]', function( value ) {
|
|
value.bind( function( color ) {
|
|
|
|
if( '' != color ) {
|
|
var border = wp.customize( 'astra-settings[mobile-header-menu-all-border]' ).get();
|
|
var menu_style = wp.customize( 'astra-settings[mobile-menu-style]' ).get();
|
|
|
|
if( '' != border.top || '' != border.right || '' != border.bottom || '' != border.left ) {
|
|
if( 'fullscreen' === menu_style ) {
|
|
var dynamicStyle = '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu > .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu > .menu-item:not(:first-child):not(:last-child)';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .menu-item.ast-submenu-expanded .sub-menu .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + '0';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-menu-enable.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu .ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
} else if ('no-toggle' === menu_style ) {
|
|
|
|
var dynamicStyle = '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar-navigation ul li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li, .ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar-navigation .sub-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > .ast-above-header-menu > .menu-item:last-child, .ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-header-bar-navigation ul > li:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li:first-child, .ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'margin-right: -' + border.right + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-no-toggle-menu-enable.ast-header-break-point .main-navigation > ul > li > .sub-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'margin-left: -' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
} else {
|
|
var dynamicStyle = '.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .main-navigation ul li a';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
//Custom menu item.
|
|
dynamicStyle += '.ast-header-break-point li.ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-style:solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += 'margin-top:0;';
|
|
dynamicStyle += 'margin-bottom:0;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point .main-header-bar .main-header-bar-navigation .main-header-menu,.ast-header-break-point .main-navigation ul li a';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
}
|
|
astra_add_dynamic_css( 'mobile-header-menu-border-color', dynamicStyle );
|
|
}
|
|
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
|
|
/**
|
|
* Mobile Above Header Border Color
|
|
*/
|
|
wp.customize( 'astra-settings[mobile-above-header-menu-b-color]', function( value ) {
|
|
value.bind( function( color ) {
|
|
|
|
if( '' != color ) {
|
|
var border = wp.customize( 'astra-settings[mobile-above-header-menu-all-border]' ).get();
|
|
var menu_style = wp.customize( 'astra-settings[mobile-above-header-menu-style]' ).get();
|
|
|
|
if( '' != border.top || '' != border.right || '' != border.bottom || '' != border.left ) {
|
|
|
|
if( 'fullscreen' === menu_style ) {
|
|
var dynamicStyle = '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu > .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu > .menu-item:not(:first-child):not(:last-child)';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .menu-item.ast-submenu-expanded .sub-menu .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + '0';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header .ast-above-header-navigation .ast-above-header-menu .ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
} else if ('no-toggle' === menu_style ) {
|
|
var dynamicStyle = '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation ul li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation .sub-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > .ast-above-header-menu > .menu-item:last-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li:last-child';
|
|
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation ul > li:first-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-menu-items .sub-menu > .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li:first-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li {';
|
|
dynamicStyle += ' margin-right: -' + border.right + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation > ul > li > .sub-menu {';
|
|
dynamicStyle += ' margin-left: -' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-navigation ul > li:first-child, .ast-header-break-point.ast-no-toggle-above-menu-enable .ast-above-header-menu-items .sub-menu > .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
|
|
} else{
|
|
|
|
var dynamicStyle = '.ast-header-break-point .ast-above-header-section-separated .ast-above-header-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
|
|
if( 'no-toggle' === menu_style ) {
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
}
|
|
dynamicStyle += '}';
|
|
|
|
if( 'no-toggle' !== menu_style ) {
|
|
dynamicStyle += '.ast-header-break-point .ast-above-header-navigation ul li a, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:first-child .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:last-child .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
}
|
|
|
|
dynamicStyle += '.ast-header-break-point .ast-above-header-section-separated .ast-above-header-menu,.ast-header-break-point .ast-above-header-navigation ul li a, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:first-child .menu-link, .above-header-nav-padding-support.ast-header-break-point .ast-above-header-menu .menu-item:last-child .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
}
|
|
|
|
astra_add_dynamic_css( 'mobile-above-header-menu-border-color', dynamicStyle );
|
|
}
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
|
|
/**
|
|
* Mobile Below Header Border Color
|
|
*/
|
|
wp.customize( 'astra-settings[mobile-below-header-menu-b-color]', function( value ) {
|
|
value.bind( function( color ) {
|
|
|
|
if( '' != color ) {
|
|
var border = wp.customize( 'astra-settings[mobile-below-header-menu-all-border]' ).get();
|
|
var menu_style = wp.customize( 'astra-settings[mobile-below-header-menu-style]' ).get();
|
|
|
|
if( '' != border.top || '' != border.right || '' != border.bottom || '' != border.left ) {
|
|
|
|
if( 'fullscreen' === menu_style ) {
|
|
var dynamicStyle = '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu > .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu > .menu-item:not(:first-child):not(:last-child)';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .menu-item:first-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + ( ( '' != border.bottom && '' != border.top ) ? border.bottom / 2 + 'px;' : border.bottom + 'px;' );
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .menu-item:last-child';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .menu-item.ast-submenu-expanded .sub-menu .menu-item';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + '0;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header .ast-below-header-navigation .ast-below-header-menu .ast-masthead-custom-menu-items';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + ( ( '' != border.top && '' != border.bottom ) ? border.top / 2 + 'px;' : border.top + 'px;' );
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-style:' + 'solid;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
} else if ('no-toggle' === menu_style ) {
|
|
|
|
var dynamicStyle = '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu .menu-item {';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-actual-nav ul > li:first-child, .ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu-items .sub-menu > .menu-item:first-child {';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header .ast-below-header-menu > .menu-item:last-child {';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-actual-nav .sub-menu .menu-item:last-child,.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-actual-nav ul ul li:last-child {';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item > .sub-menu .menu-item:last-child {';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item {';
|
|
dynamicStyle += 'margin-right: -' + border.right + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point.ast-no-toggle-below-menu-enable .ast-below-header-menu > .menu-item > .sub-menu {';
|
|
dynamicStyle += 'margin-left: -' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
|
|
} else{
|
|
var dynamicStyle = '.ast-header-break-point .ast-below-header-section-separated .ast-below-header-menu';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-top-width:' + border.top + 'px;';
|
|
dynamicStyle += 'border-right-width:' + border.right + 'px;';
|
|
dynamicStyle += 'border-left-width:' + border.left + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .ast-below-header-actual-nav ul li a, .ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-bottom-width:' + border.bottom + 'px;';
|
|
dynamicStyle += '}';
|
|
dynamicStyle += '.ast-header-break-point .ast-below-header-section-separated .ast-below-header-menu,.ast-header-break-point .ast-below-header-actual-nav ul li a, .ast-header-break-point .ast-below-header-menu-items .sub-menu .menu-item .menu-link';
|
|
dynamicStyle += '{';
|
|
dynamicStyle += 'border-color:' + color + ';';
|
|
dynamicStyle += '}';
|
|
}
|
|
|
|
astra_add_dynamic_css( 'mobile-below-header-menu-border-color', dynamicStyle );
|
|
}
|
|
} else {
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
|
|
/**
|
|
* Mobile Header : Above Header Fullscreen/Flyout Background
|
|
*/
|
|
wp.customize( 'astra-settings[above-header-bg-obj-responsive]', function( value ) {
|
|
value.bind( function( bg_obj ) {
|
|
var aboveHeaderMenuBgColor = (typeof ( wp.customize._value['astra-settings[below-header-menu-bg-obj-responsive]'] ) != 'undefined' ) ? wp.customize._value['astra-settings[below-header-menu-bg-obj-responsive]']._value: '';
|
|
if ( undefined !== aboveHeaderMenuBgColor['desktop'] && undefined !== aboveHeaderMenuBgColor['tablet'] && undefined !== aboveHeaderMenuBgColor['mobile'] ) {
|
|
if ( '' !== aboveHeaderMenuBgColor['desktop']['background-color'] || '' !== aboveHeaderMenuBgColor['tablet']['background-color'] ||'' !== aboveHeaderMenuBgColor['mobile']['background-color'] ) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if ( jQuery('body').hasClass('ast-fullscreen-above-menu-enable') || jQuery('body').hasClass('ast-flyout-above-menu-enable') ) {
|
|
const headerBgStyle = ' .ast-flyout-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap .ast-above-header-navigation,.ast-fullscreen-above-menu-enable.ast-header-break-point .ast-above-header-navigation-wrap { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'mobile-above-header-bg-obj-responsive', headerBgStyle, device )
|
|
);
|
|
}
|
|
} );
|
|
} );
|
|
|
|
/**
|
|
* Mobile Header : Above Header Fullscreen/Flyout Background
|
|
*/
|
|
|
|
wp.customize( 'astra-settings[below-header-bg-obj-responsive]', function( value ) {
|
|
value.bind( function( bg_obj ) {
|
|
var belowHeaderMenuBgColor = (typeof ( wp.customize._value['astra-settings[below-header-menu-bg-obj-responsive]'] ) != 'undefined' ) ? wp.customize._value['astra-settings[below-header-menu-bg-obj-responsive]']._value: '';
|
|
if ( undefined !== belowHeaderMenuBgColor['desktop'] && undefined !== belowHeaderMenuBgColor['tablet'] && undefined !== belowHeaderMenuBgColor['mobile'] ) {
|
|
if ( '' !== belowHeaderMenuBgColor['desktop']['background-color'] || '' !== belowHeaderMenuBgColor['tablet']['background-color'] ||'' !== belowHeaderMenuBgColor['mobile']['background-color'] ) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if ( jQuery('body').hasClass('ast-fullscreen-below-menu-enable') || jQuery('body').hasClass('ast-flyout-below-menu-enable') ) {
|
|
const headerBgStyle = '.ast-fullscreen-below-menu-overlay .ast-fullscreen-below-menu-enable.ast-header-break-point .ast-below-header-navigation-wrap,.ast-flyout-below-menu-enable.ast-header-break-point .ast-below-header-navigation-wrap .ast-below-header-actual-nav { {{css}} }';
|
|
[ 'desktop', 'tablet', 'mobile' ].forEach( ( device ) =>
|
|
astra_responsive_background_obj_css( wp.customize, bg_obj, 'mobile-below-header-bg-obj-responsive', headerBgStyle, device )
|
|
);
|
|
}
|
|
} );
|
|
} );
|
|
|
|
wp.customize( 'astra-settings[above-header-menu-spacing]', function( value ) {
|
|
value.bind( function( padding ) {
|
|
if( padding.desktop.bottom != '' || padding.tablet.bottom != '' || padding.mobile.bottom != '' ) {
|
|
var dynamicStyle = '';
|
|
dynamicStyle += '.ast-no-toggle-below-menu-enable .ast-above-header-navigation .ast-above-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-no-toggle-below-menu-enable .ast-above-header-menu-items .ast-above-header-menu > .menu-item-has-children > .ast-menu-toggle {';
|
|
dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '@media (max-width: 768px) {';
|
|
dynamicStyle += '.ast-no-toggle-below-menu-enable .ast-above-header-navigation .ast-above-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-no-toggle-below-menu-enable .ast-above-header-menu-items .ast-above-header-menu > .menu-item-has-children > .ast-menu-toggle {';
|
|
dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '@media (max-width: 544px) {';
|
|
dynamicStyle += '.ast-no-toggle-below-menu-enable .ast-above-header-navigation .ast-above-header-menu > .menu-item-has-children > .ast-menu-toggle, .ast-no-toggle-below-menu-enable .ast-above-header-menu-items .ast-above-header-menu > .menu-item-has-children > .ast-menu-toggle {';
|
|
dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';';
|
|
dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';';
|
|
dynamicStyle += '} ';
|
|
dynamicStyle += '} ';
|
|
astra_add_dynamic_css( 'above-header-menu-spacing-toggle-button', dynamicStyle );
|
|
}
|
|
} );
|
|
} );
|
|
|
|
// Above Toggle Button Color
|
|
wp.customize( 'astra-settings[mobile-above-header-toggle-btn-style-color]', function( setting ) {
|
|
setting.bind( function( toggle_button_color ) {
|
|
if ( toggle_button_color != '' ) {
|
|
|
|
if( jQuery( '.menu-toggle' ).hasClass( 'ast-above-mobile-menu-buttons-fill' ) ) {
|
|
var dynamicStyle = '.ast-header-break-point .ast-above-mobile-menu-buttons-fill.menu-toggle { border: 1px solid ' + toggle_button_color + '; background: ' + toggle_button_color + '}';
|
|
}
|
|
else if( jQuery( '.menu-toggle' ).hasClass( 'ast-above-mobile-menu-buttons-outline' ) ) {
|
|
var dynamicStyle = '.ast-header-break-point .ast-above-mobile-menu-buttons-outline.menu-toggle { border: 1px solid ' + toggle_button_color + '; color: ' + toggle_button_color + '}';
|
|
}
|
|
else {
|
|
var dynamicStyle = '.ast-header-break-point .ast-above-mobile-menu-buttons-minimal.menu-toggle { color: ' + toggle_button_color + '}';
|
|
}
|
|
astra_add_dynamic_css( 'above-toggle-button-color', dynamicStyle );
|
|
}
|
|
else{
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
});
|
|
});
|
|
|
|
// Below Toggle Button Color
|
|
wp.customize( 'astra-settings[mobile-below-header-toggle-btn-style-color]', function( setting ) {
|
|
setting.bind( function( toggle_button_color ) {
|
|
if ( toggle_button_color != '' ) {
|
|
if( jQuery( '.menu-toggle' ).hasClass( 'ast-below-mobile-menu-buttons-fill' ) ) {
|
|
var dynamicStyle = '.ast-header-break-point .ast-below-mobile-menu-buttons-fill.menu-toggle { border: 1px solid ' + toggle_button_color + '; background: ' + toggle_button_color + '}';
|
|
}
|
|
else if( jQuery( '.menu-toggle' ).hasClass( 'ast-below-mobile-menu-buttons-outline' ) ) {
|
|
var dynamicStyle = '.ast-header-break-point .ast-below-mobile-menu-buttons-outline.menu-toggle { border: 1px solid ' + toggle_button_color + '; color: ' + toggle_button_color + '}';
|
|
}
|
|
else {
|
|
var dynamicStyle = '.ast-header-break-point .ast-below-mobile-menu-buttons-minimal.menu-toggle { color: ' + toggle_button_color + '}';
|
|
}
|
|
astra_add_dynamic_css( 'below-toggle-button-color', dynamicStyle );
|
|
}
|
|
else{
|
|
wp.customize.preview.send( 'refresh' );
|
|
}
|
|
});
|
|
});
|
|
|
|
} )( jQuery );
|