Initial unmodified import from Astra (Version: 3.6.5) @ /wp-content/themes/astra/.

5 files changed, 1020 insertions, 0 deletions

diff --git a/inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js b/inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js
new file mode 100644
index 0000000..41296e8
--- /dev/null
+++ b/inc/builder/type/header/menu/assets/js/minified/customizer-preview.min.js
@@ -0,0 +1 @@
+!function(){for(var a=AstraBuilderMenuData.tablet_break_point||768,s=AstraBuilderMenuData.mobile_break_point||544,n=AstraBuilderMenuData.nav_menu_enabled||!1,e=1;e<=AstraBuilderMenuData.component_limit;e++){var t="menu"+e,i=".ast-builder-menu-"+e;astra_builder_visibility_css("section-hb-menu-"+e,i),astra_generate_outside_font_family_css("astra-settings[header-"+t+"-font-family]",i+" .menu-item > .menu-link"),astra_generate_font_weight_css("astra-settings[header-"+t+"-font-family]","astra-settings[header-"+t+"-font-weight]","font-weight",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-text-transform]","text-transform",i+" .menu-item > .menu-link"),astra_responsive_font_size("astra-settings[header-"+t+"-font-size]",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-line-height]","line-height",i+" .menu-item > .menu-link"),astra_css("astra-settings[header-"+t+"-letter-spacing]","letter-spacing",i+" .menu-item > .menu-link","px"),astra_color_responsive_css("astra-menu-color-preview","astra-settings[header-"+t+"-color-responsive]","color",i+" .main-header-menu .menu-item > .menu-link"),astra_color_responsive_css("astra-menu-h-color-preview","astra-settings[header-"+t+"-h-color-responsive]","color",i+" .menu-item:hover > .menu-link, "+i+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder-toggle","astra-settings[header-"+t+"-color-responsive]","color",i+" .menu-item > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-h-toogle-color-preview","astra-settings[header-"+t+"-h-color-responsive]","color",i+" .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-menu-active-color-preview","astra-settings[header-"+t+"-a-color-responsive]","color",i+" .menu-item.current-menu-item > .menu-link, "+i+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, "+i+" .current-menu-ancestor > .menu-link, "+i+"  .current-menu-ancestor > .ast-menu-toggle"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","desktop"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","tablet"),astra_apply_responsive_background_css("astra-settings[header-"+t+"-bg-obj-responsive]",i+" .main-header-menu, "+i+" .main-header-menu .sub-menu","mobile"),astra_color_responsive_css("astra-menu-bg-preview","astra-settings[header-"+t+"-h-bg-color-responsive]","background",i+" .menu-item:hover > .menu-link, "+i+" .inline-on-mobile .menu-item:hover > .ast-menu-toggle"),astra_color_responsive_css("astra-builder","astra-settings[header-"+t+"-a-bg-color-responsive]","background",i+" .menu-item.current-menu-item > .menu-link, "+i+" .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, "+i+" .current-menu-ancestor > .menu-link, "+i+"  .current-menu-ancestor > .ast-menu-toggle"),function(i){wp.customize("astra-settings[header-menu"+i+"-submenu-border]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" .sub-menu, .ast-builder-menu-"+i+" .inline-on-mobile .sub-menu, .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .astra-megamenu, .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .astra-full-megamenu-wrapper {";t+="border-top-width:"+e.top+"px;",t+="border-right-width:"+e.right+"px;",t+="border-left-width:"+e.left+"px;",t+="border-style: solid;",t+="border-bottom-width:"+e.bottom+"px;",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-border",t)})}),wp.customize("astra-settings[header-menu"+i+"-menu-spacing]",function(e){e.bind(function(e){var t="";t+=".ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.desktop.left+e["desktop-unit"]+";",t+="padding-right: "+e.desktop.right+e["desktop-unit"]+";",t+="padding-top: "+e.desktop.top+e["desktop-unit"]+";",t+="padding-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",t+="} ",t+="@media (max-width: "+a+"px) {",t+=".ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.tablet.left+e["tablet-unit"]+";",t+="padding-right: "+e.tablet.right+e["tablet-unit"]+";",t+="padding-top: "+e.tablet.top+e["tablet-unit"]+";",t+="padding-bottom: "+e.tablet.bottom+e["tablet-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-"+i+" .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.tablet.top+e["tablet-unit"]+";",t+="right: calc( "+e.tablet.right+e["tablet-unit"]+" - 0.907em );",t+="} ",t+="} ",t+="@media (max-width: "+s+"px) {",t+=".ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu .menu-item > .menu-link {",t+="padding-left: "+e.mobile.left+e["mobile-unit"]+";",t+="padding-right: "+e.mobile.right+e["mobile-unit"]+";",t+="padding-top: "+e.mobile.top+e["mobile-unit"]+";",t+="padding-bottom: "+e.mobile.bottom+e["mobile-unit"]+";",t+="} ",t+=".ast-hfb-header .ast-builder-menu-"+i+" .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {",t+="top: "+e.mobile.top+e["mobile-unit"]+";",t+="right: calc( "+e.mobile.right+e["mobile-unit"]+" - 0.907em );",t+="} ",t+="} ",astra_add_dynamic_css("header-menu"+i+"-menu-spacing-toggle-button",t)})}),wp.customize("astra-settings[section-hb-menu-"+i+"-margin]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" .main-header-menu, .ast-header-break-point .ast-builder-menu-"+i+" .main-header-menu",n="";n+=t+" {",n+="margin-left: "+e.desktop.left+e["desktop-unit"]+";",n+="margin-right: "+e.desktop.right+e["desktop-unit"]+";",n+="margin-top: "+e.desktop.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.desktop.bottom+e["desktop-unit"]+";",n+="} ",n+="@media (max-width: "+a+"px) {",n+=t+" {",n+="margin-left: "+e.tablet.left+e["tablet-unit"]+";",n+="margin-right: "+e.tablet.right+e["tablet-unit"]+";",n+="margin-top: "+e.tablet.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.tablet.bottom+e["desktop-unit"]+";",n+="} ",n+="} ",n+="@media (max-width: "+s+"px) {",n+=t+" {",n+="margin-left: "+e.mobile.left+e["mobile-unit"]+";",n+="margin-right: "+e.mobile.right+e["mobile-unit"]+";",n+="margin-top: "+e.mobile.top+e["desktop-unit"]+";",n+="margin-bottom: "+e.mobile.bottom+e["desktop-unit"]+";",n+="} ",n+="} ",astra_add_dynamic_css("section-hb-menu-"+i+"-margin",n)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-color]",function(e){e.bind(function(e){var t=wp.customize("astra-settings[header-menu"+i+"-submenu-item-border]").get(),n=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]").get();""!=e?1==t&&(t="",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu .menu-item .sub-menu .menu-link",t+="{",t+="border-bottom-width:"+(n?n+"px;":"0px;"),t+="border-color:"+e+";",t+="border-style: solid;",t+="}",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }",astra_add_dynamic_css("header-menu"+i+"-submenu-item-b-color",t)):wp.customize.preview.send("refresh")})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]",function(e){e.bind(function(e){var t=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu",n="";n+=t+" .menu-item .sub-menu .menu-link {",n+="border-bottom-width: "+e+"px;",n+="} ",n+=t+" .menu-item .sub-menu .menu-item:last-child .menu-link {",n+="border-bottom-width: 0px",n+="} ",astra_add_dynamic_css("header-menu"+i+"-submenu-item-b-size",n)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-item-border]",function(e){e.bind(function(e){var t=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-color]").get(),n=wp.customize("astra-settings[header-menu"+i+"-submenu-item-b-size]").get(),a=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu.submenu-with-border .sub-menu .menu-link";!0===e?(a+="{",a+="border-bottom-width:"+(n?n+"px;":"0px;"),a+="border-color:"+t+";",a+="border-style: solid;"):(a+="{",a+="border-style: none;"),a+="}",a+=".ast-desktop .ast-builder-menu-"+i+" .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }",astra_add_dynamic_css("header-menu"+i+"-submenu-item-border",a)})}),wp.customize("astra-settings[header-menu"+i+"-menu-hover-animation]",function(e){e.bind(function(e){var t=jQuery("#ast-desktop-header #ast-hf-menu-"+i);t.removeClass("ast-menu-hover-style-underline"),t.removeClass("ast-menu-hover-style-zoom"),t.removeClass("ast-menu-hover-style-overline"),n&&document.dispatchEvent(new CustomEvent("astMenuHoverStyleChanged",{detail:{}})),t.addClass("ast-menu-hover-style-"+e)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-container-animation]",function(e){e.bind(function(e){var t=jQuery("#ast-desktop-header #ast-hf-menu-"+i);t.removeClass("astra-menu-animation-fade"),t.removeClass("astra-menu-animation-slide-down"),t.removeClass("astra-menu-animation-slide-up"),""!=e&&t.addClass("astra-menu-animation-"+e)})}),wp.customize("astra-settings[header-menu"+i+"-menu-stack-on-mobile]",function(e){e.bind(function(e){var t=jQuery("#ast-mobile-header #ast-hf-menu-"+i+".main-header-menu");t.removeClass("inline-on-mobile"),t.removeClass("stack-on-mobile"),!1===e?t.addClass("inline-on-mobile"):t.addClass("stack-on-mobile")})}),wp.customize("astra-settings[header-menu"+i+"-submenu-border-radius]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu {";t+="border-radius: "+e+"px",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-border-radius",t)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-top-offset]",function(e){e.bind(function(e){var t=".ast-desktop .ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-"+i+" li.menu-item .astra-full-megamenu-wrapper {";t+="margin-top: "+e+"px",t+="}",t+=".ast-desktop .ast-builder-menu-"+i+" .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop .ast-builder-menu-"+i+" .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {",t+="height: calc( "+e+"px + 5px );",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-top-offset",t)})}),wp.customize("astra-settings[header-menu"+i+"-submenu-width]",function(e){e.bind(function(e){var t=".ast-builder-menu-"+i+" li.menu-item .sub-menu, .ast-builder-menu-"+i+" ul.inline-on-mobile li.menu-item .sub-menu {";t+="width: "+e+"px",t+="}",astra_add_dynamic_css("header-menu"+i+"-submenu-width",t)})})}(e),astra_css("astra-settings[header-"+t+"-submenu-b-color]","border-color",i+" li.menu-item .sub-menu, "+i+" .inline-on-mobile li.menu-item .sub-menu ")}astra_color_responsive_css("astra-builder-transparent-submenu","astra-settings[transparent-submenu-h-color-responsive]","color",".ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link")}(jQuery);
\ No newline at end of file
diff --git a/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js b/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js
new file mode 100644
index 0000000..54fa93b
--- /dev/null
+++ b/inc/builder/type/header/menu/assets/js/unminified/customizer-preview.js
@@ -0,0 +1,407 @@
+/**

+ * 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

+ * @since 3.0.0

+ */

+

+( function( $ ) {

+

+	var tablet_break_point    = AstraBuilderMenuData.tablet_break_point || 768,

+		mobile_break_point    = AstraBuilderMenuData.mobile_break_point || 544,

+		isNavMenuEnabled      = AstraBuilderMenuData.nav_menu_enabled || false;

+

+	for ( var index = 1; index <= AstraBuilderMenuData.component_limit; index++ ) {

+

+		var prefix = 'menu' + index;

+		var selector = '.ast-builder-menu-' + index;

+		var section = 'section-hb-menu-' + index;

+

+		// Advanced Visibility CSS Generation.

+		astra_builder_visibility_css( section, selector );

+

+		/**

+		 * Typography CSS.

+		 */

+

+			// Menu Typography.

+			astra_generate_outside_font_family_css(

+				'astra-settings[header-' + prefix + '-font-family]',

+				selector + ' .menu-item > .menu-link'

+			);

+			astra_generate_font_weight_css(

+				'astra-settings[header-' + prefix + '-font-family]',

+				'astra-settings[header-' + prefix + '-font-weight]',

+				'font-weight',

+				selector + ' .menu-item > .menu-link'

+			);

+			astra_css(

+				'astra-settings[header-' + prefix + '-text-transform]',

+				'text-transform',

+				selector + ' .menu-item > .menu-link'

+			);

+			astra_responsive_font_size(

+				'astra-settings[header-' + prefix + '-font-size]',

+				selector + ' .menu-item > .menu-link'

+			);

+			astra_css(

+				'astra-settings[header-' + prefix + '-line-height]',

+				'line-height',

+				selector + ' .menu-item > .menu-link'

+			);

+			astra_css(

+				'astra-settings[header-' + prefix + '-letter-spacing]',

+				'letter-spacing',

+				selector + ' .menu-item > .menu-link',

+				'px'

+			);

+

+		/**

+		 * Color CSS.

+		 */

+

+			/**

+			 * Menu - Colors

+			 */

+

+			// Menu - Normal Color

+			astra_color_responsive_css(

+				'astra-menu-color-preview',

+				'astra-settings[header-' + prefix + '-color-responsive]',

+				'color',

+				selector + ' .main-header-menu .menu-item > .menu-link'

+			);

+

+			// Menu - Hover Color

+			astra_color_responsive_css(

+				'astra-menu-h-color-preview',

+				'astra-settings[header-' + prefix + '-h-color-responsive]',

+				'color',

+				selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle'

+			);

+

+			// Menu Toggle -  Color

+			astra_color_responsive_css(

+				'astra-builder-toggle',

+				'astra-settings[header-' + prefix + '-color-responsive]',

+				'color',

+				selector + ' .menu-item > .ast-menu-toggle'

+			);

+

+			// Menu Toggle - Hover Color

+			astra_color_responsive_css(

+				'astra-menu-h-toogle-color-preview',

+				'astra-settings[header-' + prefix + '-h-color-responsive]',

+				'color',

+				selector + ' .menu-item:hover > .ast-menu-toggle'

+			);

+			// Menu - Active Color

+			astra_color_responsive_css(

+				'astra-menu-active-color-preview',

+				'astra-settings[header-' + prefix + '-a-color-responsive]',

+				'color',

+				selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' + selector + ' .current-menu-ancestor > .menu-link, ' + selector + '  .current-menu-ancestor > .ast-menu-toggle'

+			);

+

+			// Menu - Normal Background

+			astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'desktop' );

+			astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'tablet' );

+			astra_apply_responsive_background_css( 'astra-settings[header-' + prefix + '-bg-obj-responsive]', selector + ' .main-header-menu, ' + selector + ' .main-header-menu .sub-menu', 'mobile' );

+

+			// Menu - Hover Background

+			astra_color_responsive_css(

+				'astra-menu-bg-preview',

+				'astra-settings[header-' + prefix + '-h-bg-color-responsive]',

+				'background',

+				selector + ' .menu-item:hover > .menu-link, ' + selector + ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle'

+			);

+

+			// Menu - Active Background

+			astra_color_responsive_css(

+				'astra-builder',

+				'astra-settings[header-' + prefix + '-a-bg-color-responsive]',

+				'background',

+				selector + ' .menu-item.current-menu-item > .menu-link, ' + selector + ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' + selector + ' .current-menu-ancestor > .menu-link, ' + selector + '  .current-menu-ancestor > .ast-menu-toggle'

+			);

+

+		/**

+		 * Border CSS.

+		 */

+

+			(function (index) {

+

+				// Menu 1 > Sub Menu Border Size.

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-border]', function( setting ) {

+					setting.bind( function( border ) {

+

+						var dynamicStyle = '.ast-builder-menu-'+ index +' .sub-menu, .ast-builder-menu-'+ index +' .inline-on-mobile .sub-menu, .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .astra-megamenu, .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .astra-full-megamenu-wrapper {';

+						dynamicStyle += 'border-top-width:'  + border.top + 'px;';

+						dynamicStyle += 'border-right-width:'  + border.right + 'px;';

+						dynamicStyle += 'border-left-width:'   + border.left + 'px;';

+						dynamicStyle += 'border-style: solid;';

+						dynamicStyle += 'border-bottom-width:'   + border.bottom + 'px;';

+

+						dynamicStyle += '}';

+						astra_add_dynamic_css( 'header-menu'+ index +'-submenu-border', dynamicStyle );

+

+					} );

+				} );

+

+				// Menu Spacing - Menu 1.

+				wp.customize( 'astra-settings[header-menu'+ index +'-menu-spacing]', function( value ) {

+					value.bind( function( padding ) {

+						var dynamicStyle = '';

+						dynamicStyle += '.ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {';

+						dynamicStyle += 'padding-left: ' + padding['desktop']['left'] + padding['desktop-unit'] + ';';

+						dynamicStyle += 'padding-right: ' + padding['desktop']['right'] + padding['desktop-unit'] + ';';

+						dynamicStyle += 'padding-top: ' + padding['desktop']['top'] + padding['desktop-unit'] + ';';

+						dynamicStyle += 'padding-bottom: ' + padding['desktop']['bottom'] + padding['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+						dynamicStyle += '.ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {';

+						dynamicStyle += 'padding-left: ' + padding['tablet']['left'] + padding['tablet-unit'] + ';';

+						dynamicStyle += 'padding-right: ' + padding['tablet']['right'] + padding['tablet-unit'] + ';';

+						dynamicStyle += 'padding-top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';';

+						dynamicStyle += 'padding-bottom: ' + padding['tablet']['bottom'] + padding['tablet-unit'] + ';';

+						dynamicStyle += '} ';

+						// Toggle top.

+						dynamicStyle += '.ast-hfb-header .ast-builder-menu-'+ index +' .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {';

+						dynamicStyle += 'top: ' + padding['tablet']['top'] + padding['tablet-unit'] + ';';

+						dynamicStyle += 'right: calc( ' + padding['tablet']['right'] + padding['tablet-unit'] + ' - 0.907em );'

+						dynamicStyle += '} ';

+

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+						dynamicStyle += '.ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu .menu-item > .menu-link {';

+						dynamicStyle += 'padding-left: ' + padding['mobile']['left'] + padding['mobile-unit'] + ';';

+						dynamicStyle += 'padding-right: ' + padding['mobile']['right'] + padding['mobile-unit'] + ';';

+						dynamicStyle += 'padding-top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';';

+						dynamicStyle += 'padding-bottom: ' + padding['mobile']['bottom'] + padding['mobile-unit'] + ';';

+						dynamicStyle += '} ';

+						// Toggle top.

+						dynamicStyle += '.ast-hfb-header .ast-builder-menu-'+ index +' .main-navigation ul .menu-item.menu-item-has-children > .ast-menu-toggle {';

+						dynamicStyle += 'top: ' + padding['mobile']['top'] + padding['mobile-unit'] + ';';

+						dynamicStyle += 'right: calc( ' + padding['mobile']['right'] + padding['mobile-unit'] + ' - 0.907em );'

+						dynamicStyle += '} ';

+

+						dynamicStyle += '} ';

+

+						astra_add_dynamic_css( 'header-menu'+ index +'-menu-spacing-toggle-button', dynamicStyle );

+					} );

+				} );

+

+				// Margin - Menu 1.

+				wp.customize( 'astra-settings[section-hb-menu-'+ index +'-margin]', function( value ) {

+					value.bind( function( margin ) {

+						var selector = '.ast-builder-menu-'+ index +' .main-header-menu, .ast-header-break-point .ast-builder-menu-'+ index +' .main-header-menu';

+						var dynamicStyle = '';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['desktop']['left'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['desktop']['right'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['desktop']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['desktop']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + tablet_break_point + 'px) {';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['tablet']['left'] + margin['tablet-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['tablet']['right'] + margin['tablet-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['tablet']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['tablet']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+

+						dynamicStyle +=  '@media (max-width: ' + mobile_break_point + 'px) {';

+						dynamicStyle += selector + ' {';

+						dynamicStyle += 'margin-left: ' + margin['mobile']['left'] + margin['mobile-unit'] + ';';

+						dynamicStyle += 'margin-right: ' + margin['mobile']['right'] + margin['mobile-unit'] + ';';

+						dynamicStyle += 'margin-top: ' + margin['mobile']['top'] + margin['desktop-unit'] + ';';

+						dynamicStyle += 'margin-bottom: ' + margin['mobile']['bottom'] + margin['desktop-unit'] + ';';

+						dynamicStyle += '} ';

+						dynamicStyle += '} ';

+						astra_add_dynamic_css( 'section-hb-menu-'+ index +'-margin', dynamicStyle );

+					} );

+				} );

+

+				/**

+				 * Header Menu 1 > Submenu border Color

+				 */

+				wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-color]', function (value) {

+					value.bind(function (color) {

+						var insideBorder = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-border]').get(),

+							borderSize = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-size]').get();

+						if ('' != color) {

+							if ( true == insideBorder ) {

+

+								var dynamicStyle = '';

+

+								dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu .menu-item .sub-menu .menu-link';

+								dynamicStyle += '{';

+								dynamicStyle += 'border-bottom-width:' + ( ( borderSize ) ? borderSize + 'px;' : '0px;' );

+								dynamicStyle += 'border-color:' + color + ';';

+								dynamicStyle += 'border-style: solid;';

+								dynamicStyle += '}';

+								dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }';

+

+								astra_add_dynamic_css('header-menu'+ index +'-submenu-item-b-color', dynamicStyle);

+							}

+						} else {

+							wp.customize.preview.send('refresh');

+						}

+					});

+				});

+

+				// Sub Menu - Divider Size.

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-b-size]', function( value ) {

+					value.bind( function( borderSize ) {

+						var selector = '.ast-desktop .ast-builder-menu-'+ index + ' .main-header-menu';

+						var dynamicStyle = '';

+						dynamicStyle += selector + ' .menu-item .sub-menu .menu-link {';

+						dynamicStyle += 'border-bottom-width: ' + borderSize + 'px;';

+						dynamicStyle += '} ';

+						dynamicStyle += selector + ' .menu-item .sub-menu .menu-item:last-child .menu-link {';

+						dynamicStyle += 'border-bottom-width: 0px';

+						dynamicStyle += '} ';

+						astra_add_dynamic_css( 'header-menu'+ index +'-submenu-item-b-size', dynamicStyle );

+					} );

+				} );

+

+				/**

+				 * Header Menu 1 > Submenu border Color

+				 */

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-border]', function( value ) {

+					value.bind( function( border ) {

+						var color = wp.customize( 'astra-settings[header-menu'+ index +'-submenu-item-b-color]' ).get(),

+							borderSize = wp.customize('astra-settings[header-menu'+ index +'-submenu-item-b-size]').get();

+

+						var dynamicStyle = '.ast-desktop .ast-builder-menu-'+ index +' .main-header-menu.submenu-with-border .sub-menu .menu-link';

+

+						if( true === border  ) {

+							dynamicStyle += '{';

+							dynamicStyle += 'border-bottom-width:' + ( ( borderSize ) ? borderSize + 'px;' : '0px;' );

+							dynamicStyle += 'border-color:' + color + ';';

+							dynamicStyle += 'border-style: solid;';

+							dynamicStyle += '}';

+						} else {

+							dynamicStyle += '{';

+							dynamicStyle += 'border-style: none;';

+							dynamicStyle += '}';

+						}

+

+						dynamicStyle += '.ast-desktop .ast-builder-menu-'+ index +' .menu-item .sub-menu .menu-item:last-child .menu-link{ border-style: none; }';

+						astra_add_dynamic_css( 'header-menu'+ index +'-submenu-item-border', dynamicStyle );

+

+					} );

+				} );

+

+				// Animation preview support.

+				// Adding customizer-refresh because if megamenu is enabled on menu then caluculated left & width JS value of megamenu wrapper wiped out due to partial refresh.

+				wp.customize( 'astra-settings[header-menu'+ index +'-menu-hover-animation]', function( setting ) {

+					setting.bind( function( animation ) {

+

+						var menuWrapper = jQuery( '#ast-desktop-header #ast-hf-menu-'+ index  );

+						menuWrapper.removeClass('ast-menu-hover-style-underline');

+						menuWrapper.removeClass('ast-menu-hover-style-zoom');

+						menuWrapper.removeClass('ast-menu-hover-style-overline');

+

+						if ( isNavMenuEnabled ) {

+							document.dispatchEvent( new CustomEvent( "astMenuHoverStyleChanged",  { "detail": {} }) );

+						}

+

+						menuWrapper.addClass( 'ast-menu-hover-style-' + animation );

+					} );

+				} );

+

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-container-animation]', function( setting ) {

+					setting.bind( function( animation ) {

+

+						var menuWrapper = jQuery( '#ast-desktop-header #ast-hf-menu-'+ index  );

+						menuWrapper.removeClass('astra-menu-animation-fade');

+						menuWrapper.removeClass('astra-menu-animation-slide-down');

+						menuWrapper.removeClass('astra-menu-animation-slide-up');

+

+						if ( '' != animation ) {

+							menuWrapper.addClass( 'astra-menu-animation-' + animation );

+						}

+					} );

+				} );

+

+				// Stack on Mobile CSS

+				wp.customize( 'astra-settings[header-menu'+ index +'-menu-stack-on-mobile]', function( setting ) {

+					setting.bind( function( stack ) {

+

+						var menu_div = jQuery( '#ast-mobile-header #ast-hf-menu-'+ index + '.main-header-menu'  );

+						menu_div.removeClass('inline-on-mobile');

+						menu_div.removeClass('stack-on-mobile');

+

+						if ( false === stack ) {

+							menu_div.addClass('inline-on-mobile');

+						} else {

+							menu_div.addClass('stack-on-mobile');

+						}

+					} );

+				} );

+

+				// Sub Menu - Border Radius.

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-border-radius]', function( value ) {

+					value.bind( function( border ) {

+

+						var dynamicStyle = '.ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu {';

+						dynamicStyle += 'border-radius: ' + border + 'px';

+						dynamicStyle += '}';

+

+						astra_add_dynamic_css( 'header-menu'+ index +'-submenu-border-radius', dynamicStyle );

+

+					} );

+				} );

+

+				// Sub Menu - Top Offset.

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-top-offset]', function( value ) {

+					value.bind( function( offset ) {

+

+						var dynamicStyle = '.ast-desktop .ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu, .ast-desktop .ast-builder-menu-' + index + ' li.menu-item .astra-full-megamenu-wrapper {';

+						dynamicStyle += 'margin-top: ' + offset + 'px';

+						dynamicStyle += '}';

+

+						dynamicStyle += '.ast-desktop .ast-builder-menu-' + index + ' .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop .ast-builder-menu-' + index + ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before {';

+						dynamicStyle += 'height: calc( ' + offset + 'px + 5px );';

+						dynamicStyle += '}';

+

+						astra_add_dynamic_css( 'header-menu'+ index +'-submenu-top-offset', dynamicStyle );

+

+					} );

+				} );

+

+				// Sub Menu - Width.

+				wp.customize( 'astra-settings[header-menu'+ index +'-submenu-width]', function( value ) {

+					value.bind( function( width ) {

+

+						var dynamicStyle = '.ast-builder-menu-' + index + ' li.menu-item .sub-menu, .ast-builder-menu-' + index + ' ul.inline-on-mobile li.menu-item .sub-menu {';

+						dynamicStyle += 'width: ' + width + 'px';

+						dynamicStyle += '}';

+

+						astra_add_dynamic_css( 'header-menu'+ index +'-submenu-width', dynamicStyle );

+

+					} );

+				} );

+

+			})(index);

+

+

+			// Sub Menu - Border Color.

+			astra_css(

+				'astra-settings[header-' + prefix + '-submenu-b-color]',

+				'border-color',

+				selector + ' li.menu-item .sub-menu, ' + selector + ' .inline-on-mobile li.menu-item .sub-menu '

+			);

+	}

+

+	// Transparent header > Submenu link hover color.

+	astra_color_responsive_css( 'astra-builder-transparent-submenu', 'astra-settings[transparent-submenu-h-color-responsive]', 'color', '.ast-theme-transparent-header .main-header-menu .menu-item .sub-menu .menu-item:hover > .menu-link' );

+

+} )( jQuery );

diff --git a/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php b/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php
new file mode 100644
index 0000000..aeb74dc
--- /dev/null
+++ b/inc/builder/type/header/menu/class-astra-header-menu-component-loader.php
@@ -0,0 +1,89 @@
+<?php
+/**
+ * Menu Styling Loader for Astra theme.
+ *
+ * @package     astra-builder
+ * @author      Astra
+ * @copyright   Copyright (c) 2020, Astra
+ * @link        https://wpastra.com/
+ * @since       3.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Customizer Initialization
+ *
+ * @since 3.0.0
+ */
+class Astra_Header_Menu_Component_Loader {
+
+	/**
+	 * Constructor
+	 *
+	 * @since 3.0.0
+	 */
+	public function __construct() {
+		add_action( 'customize_preview_init', array( $this, 'preview_scripts' ), 110 );
+		// Load Google fonts.
+		add_action( 'astra_get_fonts', array( $this, 'add_fonts' ), 1 );
+	}
+
+	/**
+	 * Enqueue google fonts.
+	 *
+	 * @since 3.0.0
+	 */
+	public function add_fonts() {
+
+		$component_limit = defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_menu;
+		for ( $index = 1; $index <= $component_limit; $index++ ) {
+
+			$_prefix = 'menu' . $index;
+
+			$menu_font_family = astra_get_option( 'header-' . $_prefix . '-font-family' );
+			$menu_font_weight = astra_get_option( 'header-' . $_prefix . '-font-weight' );
+
+			Astra_Fonts::add_font( $menu_font_family, $menu_font_weight );
+		}
+
+		$mobile_menu_font_family = astra_get_option( 'header-mobile-menu-font-family' );
+		$mobile_menu_font_weight = astra_get_option( 'header-mobile-menu-font-weight' );
+
+		Astra_Fonts::add_font( $mobile_menu_font_family, $mobile_menu_font_weight );
+	}
+
+	/**
+	 * Customizer Preview
+	 *
+	 * @since 3.0.0
+	 */
+	public function preview_scripts() {
+		/**
+		 * Load unminified if SCRIPT_DEBUG is true.
+		 */
+		/* Directory and Extension */
+		$dir_name    = ( SCRIPT_DEBUG ) ? 'unminified' : 'minified';
+		$file_prefix = ( SCRIPT_DEBUG ) ? '' : '.min';
+		wp_enqueue_script( 'astra-heading-menu-customizer-preview-js', ASTRA_HEADER_MENU_URI . '/assets/js/' . $dir_name . '/customizer-preview' . $file_prefix . '.js', array( 'customize-preview', 'astra-customizer-preview-js' ), ASTRA_THEME_VERSION, true );
+
+		// Localize variables for Menu JS.
+		wp_localize_script(
+			'astra-heading-menu-customizer-preview-js',
+			'AstraBuilderMenuData',
+			array(
+				'component_limit'    => defined( 'ASTRA_EXT_VER' ) ? Astra_Builder_Helper::$component_limit : Astra_Builder_Helper::$num_of_header_menu,
+				'nav_menu_enabled'   => ( defined( 'ASTRA_EXT_VER' ) && Astra_Ext_Extension::is_active( 'nav-menu' ) ) ? true : false,
+				'tablet_break_point' => astra_get_tablet_breakpoint(),
+				'mobile_break_point' => astra_get_mobile_breakpoint(),
+			)
+		);
+	}
+}
+
+/**
+*  Kicking this off by creating the object of the class.
+*/
+new Astra_Header_Menu_Component_Loader();
diff --git a/inc/builder/type/header/menu/class-astra-header-menu-component.php b/inc/builder/type/header/menu/class-astra-header-menu-component.php
new file mode 100644
index 0000000..5c565b6
--- /dev/null
+++ b/inc/builder/type/header/menu/class-astra-header-menu-component.php
@@ -0,0 +1,153 @@
+<?php
+/**
+ * Menu for Astra theme.
+ *
+ * @package     astra-builder
+ * @author      Astra
+ * @copyright   Copyright (c) 2020, Astra
+ * @link        https://wpastra.com/
+ * @since       3.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+define( 'ASTRA_HEADER_MENU_DIR', ASTRA_THEME_DIR . 'inc/builder/type/header/menu' );
+define( 'ASTRA_HEADER_MENU_URI', ASTRA_THEME_URI . 'inc/builder/type/header/menu' );
+
+/**
+ * Heading Initial Setup
+ *
+ * @since 3.0.0
+ */
+class Astra_Header_Menu_Component {
+
+	/**
+	 * Constructor function that initializes required actions and hooks
+	 */
+	public function __construct() {
+		// @codingStandardsIgnoreStart WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
+		require_once ASTRA_HEADER_MENU_DIR . '/class-astra-header-menu-component-loader.php';
+
+		// Include front end files.
+		if ( ! is_admin() ) {
+			require_once ASTRA_HEADER_MENU_DIR . '/dynamic-css/dynamic.css.php';
+		}
+		// @codingStandardsIgnoreEnd WPThemeReview.CoreFunctionality.FileInclude.FileIncludeFound
+	}
+
+	/**
+	 * Secondary navigation markup
+	 *
+	 * @param int $index index.
+	 */
+	public static function menu_markup( $index ) {
+
+		switch ( $index ) {
+			case 1:
+				$theme_location = 'primary';
+				break;
+			case 2:
+				$theme_location = 'secondary_menu';
+				break;
+			default:
+				$theme_location = 'menu_' . $index;
+				break;
+		}
+
+		$_prefix = 'menu' . $index;
+
+		$submenu_class         = apply_filters( 'secondary_submenu_border_class', ' submenu-with-border' );
+		$stack_on_mobile_class = 'inline-on-mobile';
+
+		if ( astra_get_option( 'header-' . $_prefix . '-menu-stack-on-mobile' ) ) {
+			$stack_on_mobile_class = 'stack-on-mobile';
+		}
+
+		// Menu Animation.
+		$menu_animation = astra_get_option( 'header-menu' . $index . '-submenu-container-animation' );
+		if ( ! empty( $menu_animation ) ) {
+			$submenu_class .= ' astra-menu-animation-' . esc_attr( $menu_animation ) . ' ';
+		}
+
+		// Menu hover animation.
+		$menu_hover_animation = astra_get_option( 'header-' . $_prefix . '-menu-hover-animation' );
+		if ( '' !== $menu_hover_animation ) {
+			$submenu_class .= ' ast-menu-hover-style-' . esc_attr( $menu_hover_animation ) . ' ';
+		}
+
+		/**
+		 * Filter the classes(array) for Menu (<ul>).
+		 *
+		 * @since  3.0.0
+		 * @var Array
+		 */
+		$menu_classes = apply_filters( 'astra_' . $theme_location . '_menu_classes', array( 'main-header-menu', 'ast-nav-menu', 'ast-flex', $submenu_class, $stack_on_mobile_class ) );
+
+		$items_wrap  = '<nav ';
+		$items_wrap .= astra_attr(
+			'site-navigation',
+			array(
+				'id'         => 'site-navigation',
+				'class'      => 'ast-flex-grow-1 navigation-accessibility site-header-focus-item',
+				'aria-label' => esc_attr__( 'Site Navigation', 'astra' ),
+			)
+		);
+		$items_wrap .= '>';
+		$items_wrap .= '<div class="main-navigation ast-inline-flex">';
+		$items_wrap .= '<ul id="%1$s" class="%2$s">%3$s</ul>';
+		$items_wrap .= '</div>';
+		$items_wrap .= '</nav>';
+
+		// Fallback Menu if primary menu not set.
+		$fallback_menu_args = array(
+			'theme_location' => $theme_location,
+			'menu_id'        => 'ast-hf-menu-' . $index,
+			'menu_class'     => 'main-navigation ast-inline-flex',
+			'container'      => 'div',
+			'before'         => '<ul class="' . esc_attr( implode( ' ', $menu_classes ) ) . '">',
+			'after'          => '</ul>',
+			'walker'         => new Astra_Walker_Page(),
+		);
+
+		// To add default alignment for navigation which can be added through any third party plugin.
+		// Do not add any CSS from theme except header alignment.
+		echo '<div ' . astra_attr( 'ast-main-header-bar-alignment' ) . '>';
+
+		if ( is_customize_preview() ) {
+			Astra_Builder_UI_Controller::render_customizer_edit_button();
+		}
+		if ( has_nav_menu( $theme_location ) ) {
+			wp_nav_menu(
+				array(
+					'menu_id'         => 'ast-hf-menu-' . $index,
+					'menu_class'      => esc_attr( implode( ' ', $menu_classes ) ),
+					'container'       => 'div',
+					'container_class' => 'main-header-bar-navigation',
+					'items_wrap'      => $items_wrap,
+					'theme_location'  => $theme_location,
+				)
+			);
+		} else {
+				echo '<div class="main-header-bar-navigation ast-flex-1">';
+					echo '<nav ';
+					echo astra_attr(
+						'site-navigation',
+						array(
+							'id' => 'site-navigation',
+						)
+					);
+					echo ' class="ast-flex-grow-1 navigation-accessibility" aria-label="' . esc_attr__( 'Site Navigation', 'astra' ) . '">';
+						wp_page_menu( $fallback_menu_args );
+					echo '</nav>';
+				echo '</div>';
+		}
+		echo '</div>';
+	}
+}
+
+/**
+ *  Kicking this off by creating an object.
+ */
+new Astra_Header_Menu_Component();
diff --git a/inc/builder/type/header/menu/dynamic-css/dynamic.css.php b/inc/builder/type/header/menu/dynamic-css/dynamic.css.php
new file mode 100644
index 0000000..074abb7
--- /dev/null
+++ b/inc/builder/type/header/menu/dynamic-css/dynamic.css.php
@@ -0,0 +1,370 @@
+<?php
+/**
+ * Heading Colors - Dynamic CSS
+ *
+ * @package astra-builder
+ * @since 3.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Heading Colors
+ */
+add_filter( 'astra_dynamic_theme_css', 'astra_hb_menu_dynamic_css' );
+
+/**
+ * Dynamic CSS
+ *
+ * @param  string $dynamic_css          Astra Dynamic CSS.
+ * @param  string $dynamic_css_filtered Astra Dynamic CSS Filters.
+ * @return String Generated dynamic CSS for Heading Colors.
+ *
+ * @since 3.0.0
+ */
+function astra_hb_menu_dynamic_css( $dynamic_css, $dynamic_css_filtered = '' ) {
+
+	for ( $index = 1; $index <= Astra_Builder_Helper::$num_of_header_menu; $index++ ) {
+
+		if ( ! Astra_Builder_Helper::is_component_loaded( 'menu-' . $index, 'header' ) ) {
+			continue;
+		}
+
+		$_prefix  = 'menu' . $index;
+		$_section = 'section-hb-menu-' . $index;
+
+		$selector = '.ast-builder-menu-' . $index;
+
+		// Theme color.
+		$theme_color = astra_get_option( 'theme-color' );
+
+		// Sub Menu.
+		$sub_menu_border         = astra_get_option( 'header-' . $_prefix . '-submenu-border' );
+		$sub_menu_divider_toggle = astra_get_option( 'header-' . $_prefix . '-submenu-item-border' );
+		$sub_menu_divider_size   = astra_get_option( 'header-' . $_prefix . '-submenu-item-b-size' );
+		$sub_menu_divider_color  = astra_get_option( 'header-' . $_prefix . '-submenu-item-b-color' );
+		$sub_menu_border_radius  = astra_get_option( 'header-' . $_prefix . '-submenu-border-radius' );
+		$sub_menu_top_offset     = astra_get_option( 'header-' . $_prefix . '-submenu-top-offset' );
+		$sub_menu_width          = astra_get_option( 'header-' . $_prefix . '-submenu-width' );
+
+		// Menu.
+		$menu_resp_color           = astra_get_option( 'header-' . $_prefix . '-color-responsive' );
+		$menu_resp_bg_color        = astra_get_option( 'header-' . $_prefix . '-bg-obj-responsive' );
+		$menu_resp_color_hover     = astra_get_option( 'header-' . $_prefix . '-h-color-responsive' );
+		$menu_resp_bg_color_hover  = astra_get_option( 'header-' . $_prefix . '-h-bg-color-responsive' );
+		$menu_resp_color_active    = astra_get_option( 'header-' . $_prefix . '-a-color-responsive' );
+		$menu_resp_bg_color_active = astra_get_option( 'header-' . $_prefix . '-a-bg-color-responsive' );
+
+		$menu_resp_color_desktop = ( isset( $menu_resp_color['desktop'] ) ) ? $menu_resp_color['desktop'] : '';
+		$menu_resp_color_tablet  = ( isset( $menu_resp_color['tablet'] ) ) ? $menu_resp_color['tablet'] : '';
+		$menu_resp_color_mobile  = ( isset( $menu_resp_color['mobile'] ) ) ? $menu_resp_color['mobile'] : '';
+
+		$menu_resp_color_hover_desktop = ( isset( $menu_resp_color_hover['desktop'] ) ) ? $menu_resp_color_hover['desktop'] : '';
+		$menu_resp_color_hover_tablet  = ( isset( $menu_resp_color_hover['tablet'] ) ) ? $menu_resp_color_hover['tablet'] : '';
+		$menu_resp_color_hover_mobile  = ( isset( $menu_resp_color_hover['mobile'] ) ) ? $menu_resp_color_hover['mobile'] : '';
+
+		$menu_resp_bg_color_hover_desktop = ( isset( $menu_resp_bg_color_hover['desktop'] ) ) ? $menu_resp_bg_color_hover['desktop'] : '';
+		$menu_resp_bg_color_hover_tablet  = ( isset( $menu_resp_bg_color_hover['tablet'] ) ) ? $menu_resp_bg_color_hover['tablet'] : '';
+		$menu_resp_bg_color_hover_mobile  = ( isset( $menu_resp_bg_color_hover['mobile'] ) ) ? $menu_resp_bg_color_hover['mobile'] : '';
+
+		$menu_resp_color_active_desktop = ( isset( $menu_resp_color_active['desktop'] ) ) ? $menu_resp_color_active['desktop'] : '';
+		$menu_resp_color_active_tablet  = ( isset( $menu_resp_color_active['tablet'] ) ) ? $menu_resp_color_active['tablet'] : '';
+		$menu_resp_color_active_mobile  = ( isset( $menu_resp_color_active['mobile'] ) ) ? $menu_resp_color_active['mobile'] : '';
+
+		$menu_resp_bg_color_active_desktop = ( isset( $menu_resp_bg_color_active['desktop'] ) ) ? $menu_resp_bg_color_active['desktop'] : '';
+		$menu_resp_bg_color_active_tablet  = ( isset( $menu_resp_bg_color_active['tablet'] ) ) ? $menu_resp_bg_color_active['tablet'] : '';
+		$menu_resp_bg_color_active_mobile  = ( isset( $menu_resp_bg_color_active['mobile'] ) ) ? $menu_resp_bg_color_active['mobile'] : '';
+
+		// Typography.
+		$menu_font_family    = astra_get_option( 'header-' . $_prefix . '-font-family' );
+		$menu_font_size      = astra_get_option( 'header-' . $_prefix . '-font-size' );
+		$menu_font_weight    = astra_get_option( 'header-' . $_prefix . '-font-weight' );
+		$menu_text_transform = astra_get_option( 'header-' . $_prefix . '-text-transform' );
+		$menu_line_height    = astra_get_option( 'header-' . $_prefix . '-line-height' );
+
+		$menu_font_size_desktop      = ( isset( $menu_font_size['desktop'] ) ) ? $menu_font_size['desktop'] : '';
+		$menu_font_size_tablet       = ( isset( $menu_font_size['tablet'] ) ) ? $menu_font_size['tablet'] : '';
+		$menu_font_size_mobile       = ( isset( $menu_font_size['mobile'] ) ) ? $menu_font_size['mobile'] : '';
+		$menu_font_size_desktop_unit = ( isset( $menu_font_size['desktop-unit'] ) ) ? $menu_font_size['desktop-unit'] : '';
+		$menu_font_size_tablet_unit  = ( isset( $menu_font_size['tablet-unit'] ) ) ? $menu_font_size['tablet-unit'] : '';
+		$menu_font_size_mobile_unit  = ( isset( $menu_font_size['mobile-unit'] ) ) ? $menu_font_size['mobile-unit'] : '';
+
+
+		// Spacing.
+		$menu_spacing = astra_get_option( 'header-' . $_prefix . '-menu-spacing' );
+
+		$sub_menu_border_top = ( isset( $sub_menu_border ) && ! empty( $sub_menu_border['top'] ) ) ? $sub_menu_border['top'] : 0;
+
+		$sub_menu_border_bottom = ( isset( $sub_menu_border ) && ! empty( $sub_menu_border['bottom'] ) ) ? $sub_menu_border['bottom'] : 0;
+
+		$sub_menu_border_right = ( isset( $sub_menu_border ) && ! empty( $sub_menu_border['right'] ) ) ? $sub_menu_border['right'] : 0;
+
+		$sub_menu_border_left = ( isset( $sub_menu_border ) && ! empty( $sub_menu_border['left'] ) ) ? $sub_menu_border['left'] : 0;
+
+		// Border-Radius.
+		$sub_menu_border_radius = ! empty( $sub_menu_border_radius ) ? $sub_menu_border_radius : 0;
+
+		// Top offset position.
+		$sub_menu_top_offset = ! empty( $sub_menu_top_offset ) ? $sub_menu_top_offset : 0;
+
+		// Submenu container width.
+		$sub_menu_width = ! empty( $sub_menu_width ) ? $sub_menu_width : '';
+
+		// Margin.
+		$margin          = astra_get_option( $_section . '-margin' );
+		$margin_selector = '.ast-builder-menu-' . $index . ' .main-header-menu, .ast-header-break-point .ast-builder-menu-' . $index . ' .main-header-menu';
+
+		$css_output_desktop = array(
+
+			// Menu.
+			$selector                                    => array(
+				'font-family'    => astra_get_font_family( $menu_font_family ),
+				'font-weight'    => esc_attr( $menu_font_weight ),
+				'text-transform' => esc_attr( $menu_text_transform ),
+			),
+			$selector . ' .menu-item > .menu-link'       => array(
+				'line-height'    => esc_attr( $menu_line_height ),
+				'font-size'      => astra_get_font_css_value( $menu_font_size_desktop, $menu_font_size_desktop_unit ),
+				'color'          => $menu_resp_color_desktop,
+				'padding-top'    => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ),
+				'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'desktop' ),
+				'padding-left'   => astra_responsive_spacing( $menu_spacing, 'left', 'desktop' ),
+				'padding-right'  => astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ),
+			),
+			$selector . ' .menu-item > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_desktop,
+			),
+			$selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array(
+				'color'      => $menu_resp_color_hover_desktop,
+				'background' => $menu_resp_bg_color_hover_desktop,
+			),
+			$selector . ' .menu-item:hover > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_hover_desktop,
+			),
+			$selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link' => array(
+				'color'      => $menu_resp_color_active_desktop,
+				'background' => $menu_resp_bg_color_active_desktop,
+			),
+			$selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_active_desktop,
+			),
+			// Sub Menu.
+			$selector . ' .sub-menu, ' . $selector . ' .inline-on-mobile .sub-menu' => array(
+				'border-top-width'    => astra_get_css_value( $sub_menu_border_top, 'px' ),
+				'border-bottom-width' => astra_get_css_value( $sub_menu_border_bottom, 'px' ),
+				'border-right-width'  => astra_get_css_value( $sub_menu_border_right, 'px' ),
+				'border-left-width'   => astra_get_css_value( $sub_menu_border_left, 'px' ),
+				'border-color'        => esc_attr( astra_get_option( 'header-' . $_prefix . '-submenu-b-color', $theme_color ) ),
+				'border-style'        => 'solid',
+				'width'               => astra_get_css_value( $sub_menu_width, 'px' ),
+				'border-radius'       => astra_get_css_value( $sub_menu_border_radius, 'px' ),
+			),
+			$selector . ' .main-header-menu > .menu-item > .sub-menu, ' . $selector . ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper' => array(
+				'margin-top' => astra_get_css_value( $sub_menu_top_offset, 'px' ),
+			),
+			'.ast-desktop ' . $selector . ' .main-header-menu > .menu-item > .sub-menu:before, .ast-desktop ' . $selector . ' .main-header-menu > .menu-item > .astra-full-megamenu-wrapper:before' => array(
+				'height' => astra_calculate_spacing( $sub_menu_top_offset . 'px', '+', '5', 'px' ),
+			),
+			$selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array(
+				'top'   => astra_responsive_spacing( $menu_spacing, 'top', 'desktop' ),
+				'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'desktop' ), '-', '0.907', 'em' ),
+			),
+			// Margin CSS.
+			$margin_selector                             => array(
+				'margin-top'    => astra_responsive_spacing( $margin, 'top', 'desktop' ),
+				'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'desktop' ),
+				'margin-left'   => astra_responsive_spacing( $margin, 'left', 'desktop' ),
+				'margin-right'  => astra_responsive_spacing( $margin, 'right', 'desktop' ),
+			),
+		);
+
+		$css_output_desktop[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'desktop' );
+
+		$mobile_selector = '.ast-header-break-point .ast-builder-menu-' . $index;
+
+		$menu_spacing_mobile_top = astra_responsive_spacing( $menu_spacing, 'top', 'mobile' );
+		$menu_spacing_mobile_top = ( isset( $menu_spacing_mobile_top ) && ! empty( $menu_spacing_mobile_top ) ) ? $menu_spacing_mobile_top : 0;
+
+		$menu_spacing_tablet_top = astra_responsive_spacing( $menu_spacing, 'top', 'tablet' );
+		$menu_spacing_tablet_top = ( isset( $menu_spacing_tablet_top ) && ! empty( $menu_spacing_tablet_top ) ) ? $menu_spacing_tablet_top : 0;
+
+		$css_output_tablet = array(
+
+			$mobile_selector                             => array(
+				'font-size' => astra_get_font_css_value( $menu_font_size_tablet, $menu_font_size_tablet_unit ),
+			),
+			$mobile_selector . ' .main-header-menu .menu-item > .menu-link' => array(
+				'padding-top'    => astra_responsive_spacing( $menu_spacing, 'top', 'tablet' ),
+				'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'tablet' ),
+				'padding-left'   => astra_responsive_spacing( $menu_spacing, 'left', 'tablet' ),
+				'padding-right'  => astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ),
+			),
+			$selector . ' .main-header-menu .menu-item > .menu-link' => array(
+				'color' => $menu_resp_color_tablet,
+			),
+			$selector . ' .menu-item > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_tablet,
+			),
+			$selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array(
+				'color'      => $menu_resp_color_hover_tablet,
+				'background' => $menu_resp_bg_color_hover_tablet,
+			),
+			$selector . ' .menu-item:hover > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_hover_tablet,
+			),
+			$selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link, ' . $selector . ' .current-menu-ancestor > .ast-menu-toggle' => array(
+				'color'      => $menu_resp_color_active_tablet,
+				'background' => $menu_resp_bg_color_active_tablet,
+			),
+			$selector . ' .menu-item.current-menu-item > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_active_tablet,
+			),
+			$mobile_selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array(
+				'top'   => $menu_spacing_tablet_top,
+				'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'tablet' ), '-', '0.907', 'em' ),
+			),
+			$selector . ' .menu-item-has-children > .menu-link:after' => array(
+				'content' => 'unset',
+			),
+			// Margin CSS.
+			$margin_selector                             => array(
+				'margin-top'    => astra_responsive_spacing( $margin, 'top', 'tablet' ),
+				'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'tablet' ),
+				'margin-left'   => astra_responsive_spacing( $margin, 'left', 'tablet' ),
+				'margin-right'  => astra_responsive_spacing( $margin, 'right', 'tablet' ),
+			),
+		);
+
+		$css_output_tablet[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'tablet' );
+
+		$css_output_mobile = array(
+
+			$mobile_selector                              => array(
+				'font-size' => astra_get_font_css_value( $menu_font_size_mobile, $menu_font_size_mobile_unit ),
+			),
+			$mobile_selector . ' .main-header-menu .menu-item > .menu-link' => array(
+				'padding-top'    => astra_responsive_spacing( $menu_spacing, 'top', 'mobile' ),
+				'padding-bottom' => astra_responsive_spacing( $menu_spacing, 'bottom', 'mobile' ),
+				'padding-left'   => astra_responsive_spacing( $menu_spacing, 'left', 'mobile' ),
+				'padding-right'  => astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ),
+			),
+			$selector . ' .main-header-menu .menu-item > .menu-link' => array(
+				'color' => $menu_resp_color_mobile,
+			),
+			$selector . ' .menu-item  > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_mobile,
+			),
+			$selector . ' .menu-item:hover > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item:hover > .ast-menu-toggle' => array(
+				'color'      => $menu_resp_color_hover_mobile,
+				'background' => $menu_resp_bg_color_hover_mobile,
+			),
+			$selector . ' .menu-item:hover  > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_hover_mobile,
+			),
+			$selector . ' .menu-item.current-menu-item > .menu-link, ' . $selector . ' .inline-on-mobile .menu-item.current-menu-item > .ast-menu-toggle, ' . $selector . ' .current-menu-ancestor > .menu-link, ' . $selector . ' .current-menu-ancestor > .ast-menu-toggle' => array(
+				'color'      => $menu_resp_color_active_mobile,
+				'background' => $menu_resp_bg_color_active_mobile,
+			),
+			$selector . ' .menu-item.current-menu-item  > .ast-menu-toggle' => array(
+				'color' => $menu_resp_color_active_mobile,
+			),
+			$mobile_selector . ' .menu-item.menu-item-has-children > .ast-menu-toggle' => array(
+				'top'   => $menu_spacing_mobile_top,
+				'right' => astra_calculate_spacing( astra_responsive_spacing( $menu_spacing, 'right', 'mobile' ), '-', '0.907', 'em' ),
+			),
+			// Margin CSS.
+			$margin_selector                              => array(
+				'margin-top'    => astra_responsive_spacing( $margin, 'top', 'mobile' ),
+				'margin-bottom' => astra_responsive_spacing( $margin, 'bottom', 'mobile' ),
+				'margin-left'   => astra_responsive_spacing( $margin, 'left', 'mobile' ),
+				'margin-right'  => astra_responsive_spacing( $margin, 'right', 'mobile' ),
+			),
+		);
+
+		$css_output_mobile[ $selector . ' .main-header-menu, ' . $selector . ' .main-header-menu .sub-menu' ] = astra_get_responsive_background_obj( $menu_resp_bg_color, 'mobile' );
+
+		if ( true === $sub_menu_divider_toggle ) {
+			// Sub Menu Divider.
+			$css_output_desktop[ '.ast-desktop ' . $selector . ' .menu-item .sub-menu .menu-link' ]                       = array(
+				'border-bottom-width' => $sub_menu_divider_size . 'px',
+				'border-color'        => $sub_menu_divider_color,
+				'border-style'        => 'solid',
+			);
+			$css_output_desktop[ '.ast-desktop ' . $selector . ' .menu-item .sub-menu .menu-item:last-child .menu-link' ] = array(
+				'border-bottom-width' => 0,
+			);
+		} else {
+
+			$css_output_desktop[ '.ast-desktop .ast-builder-menu-' . $index . ' .menu-item .sub-menu .menu-link' ] = array(
+				'border-style' => 'none',
+			);
+		}
+
+		/* Parse CSS from array() */
+		$css_output  = astra_parse_css( $css_output_desktop );
+		$css_output .= astra_parse_css( $css_output_tablet, '', astra_get_tablet_breakpoint() );
+		$css_output .= astra_parse_css( $css_output_mobile, '', astra_get_mobile_breakpoint() );
+
+		$dynamic_css .= $css_output;
+		
+		$dynamic_css .= Astra_Builder_Base_Dynamic_CSS::prepare_visibility_css( $_section, $selector );
+
+	}
+
+	$dynamic_css .= astra_menu_hover_style_css();
+	return $dynamic_css;
+}
+
+/**
+ * Load Menu hover style static CSS if any one of the menu hover style is selected.
+ * 
+ * @return string
+ * @since 3.5.0
+ */
+function astra_menu_hover_style_css() {
+	$hover_style_flg = false;
+	$menu_hover_css  = '';
+	for ( $index = 1; $index <= Astra_Builder_Helper::$num_of_header_menu; $index++ ) {
+		if ( '' !== astra_get_option( 'header-menu' . $index . '-menu-hover-animation' ) ) {
+			$hover_style_flg = true;
+		}
+	}
+
+	if ( true === $hover_style_flg ) {
+		$menu_hover_css = '
+		.ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before,
+		.ast-desktop .ast-menu-hover-style-overline > .menu-item > .menu-link:before {
+		  content: "";
+		  position: absolute;
+		  width: 100%;
+		  right: 50%;
+		  height: 1px;
+		  background-color: transparent;
+		  transform: scale(0, 0) translate(-50%, 0);
+		  transition: transform .3s ease-in-out, color .0s ease-in-out;
+		}
+		
+		.ast-desktop .ast-menu-hover-style-underline > .menu-item:hover > .menu-link:before,
+		.ast-desktop .ast-menu-hover-style-overline > .menu-item:hover > .menu-link:before {
+		  width: calc(100% - 1.2em);
+		  background-color: currentColor;
+		  transform: scale(1, 1) translate(50%, 0);
+		}
+		
+		.ast-desktop .ast-menu-hover-style-underline > .menu-item > .menu-link:before {
+		  bottom: 0;
+		}
+		
+		.ast-desktop .ast-menu-hover-style-overline > .menu-item > .menu-link:before {
+		  top: 0;
+		}
+		
+		.ast-desktop .ast-menu-hover-style-zoom > .menu-item > .menu-link:hover {
+		  transition: all .3s ease;
+		  transform: scale(1.2);
+		}';
+	}
+	return Astra_Enqueue_Scripts::trim_css( $menu_hover_css );
+}