XMAN Replicator

Path: /home/vestsxzf/public_html/wp-content/themes/blocksy/inc/panel-builder/header/menu/

Name	Size	Rights	Date	Actions
[.]	<DIR>	drwxr-xr-x	2026-03-27 10:28	🔄 🗑️ 🗑️📁 ⬇️ 🔒
[..]	<DIR>	drwxr-xr-x	2026-03-27 10:28	🔄 🗑️ 🗑️📁 ⬇️ 🔒
config.php	337 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
dynamic-styles.php	22,992 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
options.php	27,403 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
sync.js	19,131 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒
view.php	3,138 B	-rw-r--r--	2026-03-27 10:28	✏️ 🔄 🗑️ ⬇️ 🔒

Edit: sync.js

import ctEvents from 'ct-events'

import { typographyOption } from '../../../../static/js/customizer/sync/variables/typography'
import { updateAndSaveEl } from '../../../../static/js/customizer/sync'
import {
	getRootSelectorFor,
	assembleSelector,
	withKeys,
	mutateSelector,
	getSkipRuleKeyword,
} from '../../../../static/js/customizer/sync/helpers'

export const handleMenuVariables = ({ itemId, values }) => {
	const header_menu_type = values.header_menu_type || 'type-1'

const allSkipped = {
		default: {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		hover: {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		active: {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		'hover-type-3': {
			color: getSkipRuleKeyword('DEFAULT'),
		},
		'active-type-3': {
			color: getSkipRuleKeyword('DEFAULT'),
		},
	}

const valuesDefaults = {
		menuFontColor: {
			default: { color: 'var(--theme-text-color)' },
			hover: {
				color: getSkipRuleKeyword('DEFAULT'),
			},
			active: {
				color: getSkipRuleKeyword('DEFAULT'),
			},
			'hover-type-3': { color: '#ffffff' },
			'active-type-3': {
				color: getSkipRuleKeyword('DEFAULT'),
			},
		},

transparentMenuFontColor: allSkipped,
		stickyMenuFontColor: allSkipped,
		headerDropdownDivider: {
			width: 1,
			style: 'dashed',
			color: {
				color: 'rgba(255, 255, 255, 0.1)',
			},
		},
	}

const extractKeyWithDefault = (key) => (values) => {
		return values[key] || valuesDefaults[key]
	}

const menuFontColor = [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'theme-link-initial-color',
			type: 'color:default',

fullValue: true,
			extractValue: extractKeyWithDefault('menuFontColor'),
		},

{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'theme-link-hover-color',
			type:
				header_menu_type === 'type-3'
					? 'color:hover-type-3'
					: 'color:hover',

fullValue: true,
			extractValue: extractKeyWithDefault('menuFontColor'),
		},

{
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'theme-link-active-color',
			type:
				header_menu_type === 'type-3'
					? 'color:active-type-3'
					: 'color:active',

fullValue: true,
			extractValue: extractKeyWithDefault('menuFontColor'),
		},
	]

const transparentMenuFontColor = [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),
			variable: 'theme-link-initial-color',
			type: 'color:default',

fullValue: true,
			extractValue: extractKeyWithDefault('transparentMenuFontColor'),
		},

{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),
			variable: 'theme-link-hover-color',
			type:
				header_menu_type === 'type-3'
					? 'color:hover-type-3'
					: 'color:hover',

fullValue: true,
			extractValue: extractKeyWithDefault('transparentMenuFontColor'),
		},

{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-transparent-row="yes"]',
				})
			),
			variable: 'theme-link-active-color',
			type:
				header_menu_type === 'type-3'
					? 'color:active-type-3'
					: 'color:active',

fullValue: true,
			extractValue: extractKeyWithDefault('transparentMenuFontColor'),
		},
	]

const stickyMenuFontColor = [
		{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'theme-link-initial-color',
			type: 'color:default',

fullValue: true,

extractValue: extractKeyWithDefault('stickyMenuFontColor'),
		},

{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'theme-link-hover-color',
			type:
				header_menu_type === 'type-3'
					? 'color:hover-type-3'
					: 'color:hover',

fullValue: true,
			extractValue: extractKeyWithDefault('stickyMenuFontColor'),
		},

{
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '> ul > li > a',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'theme-link-active-color',
			type:
				header_menu_type === 'type-3'
					? 'color:active-type-3'
					: 'color:active',

fullValue: true,

extractValue: extractKeyWithDefault('stickyMenuFontColor'),
		},
	]

return {
		headerMenuItemsSpacing: {
			selector: assembleSelector(getRootSelectorFor({ itemId })),
			variable: 'menu-items-spacing',
			unit: 'px',
		},

headerMenuItemsGap: {
			selector: assembleSelector(getRootSelectorFor({ itemId })),
			variable: 'menu-items-gap',
			unit: 'px',
		},

headerMenuItemsHeight: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			variable: 'menu-item-height',
			unit: '%',
		},

...typographyOption({
			id: 'headerMenuFont',

selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
		}),

dropdownTopOffset: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-top-offset',
			unit: 'px',
		},

stickyStateDropdownTopOffset: {
			selector: assembleSelector(
				mutateSelector({
					selector: mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu',
					}),
					operation: 'between',
					to_add: '[data-sticky*="yes"]',
				})
			),
			variable: 'sticky-state-dropdown-top-offset',
			unit: 'px',
		},

dropdown_horizontal_offset: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-horizontal-offset',
			unit: 'px',
		},

dropdownMenuWidth: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-width',
			unit: 'px',
		},

dropdownItemsSpacing: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			variable: 'dropdown-items-spacing',
			unit: 'px',
		},

...typographyOption({
			id: 'headerDropdownFont',

selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu .ct-menu-link',
				})
			),
		}),

...withKeys(
			['headerDropdownDivider', 'dropdown_items_type'],
			[
				{
					selector: assembleSelector(
						mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						})
					),
					fullValue: true,
					extractValue: extractKeyWithDefault(
						'headerDropdownDivider'
					),
					variable: 'dropdown-divider',
					type: 'border',
				},

{
					selector: assembleSelector(
						mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						})
					),
					fullValue: true,
					extractValue: ({ dropdown_items_type }) => {
						if (dropdown_items_type !== 'padded') {
							return 'CT_CSS_SKIP_RULE'
						}

const headerDropdownDivider = extractKeyWithDefault(
							'headerDropdownDivider'
						)(values)

return headerDropdownDivider['style'] !== 'none'
							? '1'
							: '0'
					},
					unit: '',
					variable: 'has-divider',
				},
			]
		),

headerMenuMargin: {
			selector: assembleSelector(getRootSelectorFor({ itemId })),
			type: 'spacing',
			variable: 'margin',
			responsive: true,
			important: true,
		},

headerToplevelBorderRadius: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '> ul > li > a',
				})
			),
			type: 'spacing',
			variable: 'menu-item-radius',
			responsive: true,
		},

headerDropdownShadow: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			type: 'box-shadow',
			variable: 'theme-box-shadow',
			responsive: true,
		},

headerDropdownRadius: {
			selector: assembleSelector(
				mutateSelector({
					selector: getRootSelectorFor({ itemId }),
					operation: 'suffix',
					to_add: '.sub-menu',
				})
			),
			type: 'spacing',
			variable: 'theme-border-radius',
			responsive: true,
		},

header_menu_type: [
			...menuFontColor,

...(values.stickyMenuFontColor ? stickyMenuFontColor : []),

...(values.transparentMenuFontColor
				? transparentMenuFontColor
				: []),
		],

// default state
		menuFontColor,

menuIndicatorColor: [
			{
				selector: assembleSelector(getRootSelectorFor({ itemId })),
				variable: 'menu-indicator-initial-color',
				type: 'color:default',
				responsive: true,
			},

{
				selector: assembleSelector(getRootSelectorFor({ itemId })),
				variable: 'menu-indicator-hover-color',
				type: 'color:hover',
				responsive: true,
			},

{
				selector: assembleSelector(getRootSelectorFor({ itemId })),
				variable: 'menu-indicator-active-color',
				type: 'color:active',
				responsive: true,
			},
		],

headerDropdownFontColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu .ct-menu-link',
					})
				),
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu .ct-menu-link',
					})
				),
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},

headerDropdownBackground: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu',
					})
				),
				variable: 'dropdown-background-color',
				type: 'color:default',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'suffix',
						to_add: '.sub-menu',
					})
				),
				variable: 'dropdown-background-hover-color',
				type: 'color:hover',
			},
		],

// transparent state
		transparentMenuFontColor,

transparentMenuIndicatorColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),

variable: 'menu-indicator-initial-color',
				type: 'color:default',
				responsive: true,
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),

variable: 'menu-indicator-hover-color',
				type: 'color:hover',
				responsive: true,
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),

variable: 'menu-indicator-active-color',
				type: 'color:active',
				responsive: true,
			},
		],

transparentHeaderDropdownFontColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},

transparentHeaderDropdownBackground: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'dropdown-background-color',
				type: 'color:default',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-transparent-row="yes"]',
					})
				),
				variable: 'dropdown-background-hover-color',
				type: 'color:hover',
			},
		],

// sticky state
		stickyMenuFontColor,

stickyMenuIndicatorColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'menu-indicator-initial-color',
				type: 'color:default',
				responsive: true,
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'menu-indicator-hover-color',
				type: 'color:hover',
				responsive: true,
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: getRootSelectorFor({ itemId }),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'menu-indicator-active-color',
				type: 'color:active',
				responsive: true,
			},
		],

stickyHeaderDropdownFontColor: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'theme-link-initial-color',
				type: 'color:default',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'theme-link-hover-color',
				type: 'color:hover',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu .ct-menu-link',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'theme-link-active-color',
				type: 'color:active',
			},
		],

stickyHeaderDropdownBackground: [
			{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'dropdown-background-color',
				type: 'color:default',
			},

{
				selector: assembleSelector(
					mutateSelector({
						selector: mutateSelector({
							selector: getRootSelectorFor({ itemId }),
							operation: 'suffix',
							to_add: '.sub-menu',
						}),
						operation: 'between',
						to_add: '[data-sticky*="yes"]',
					})
				),
				variable: 'dropdown-background-hover-color',
				type: 'color:hover',
			},
		],
	}
}

export const handleMenuOptions = ({
	selector,
	changeDescriptor: { optionId, optionValue, values },
}) => {
	if (
		optionId === 'header_menu_type' ||
		optionId === 'menu_indicator_effect'
	) {
		updateAndSaveEl(selector, (el) => {
			el.dataset.menu = `${values.header_menu_type}${
				values.header_menu_type === 'type-2'
					? `:${values.menu_indicator_effect}`
					: ``
			}`
		})
	}

if (optionId === 'headerMenuItemsSpacing') {
		ctEvents.trigger('ct:header:update')
		ctEvents.trigger('ct:header:refresh-menu-submenus')
	}

if (
		optionId === 'dropdown_animation' ||
		optionId === 'dropdown_items_type'
	) {
		const {
			dropdown_animation = 'type-1',
			dropdown_items_type = 'simple',
		} = values

updateAndSaveEl(
			selector,
			(el) =>
				(el.dataset.dropdown = `${dropdown_animation}:${dropdown_items_type}`)
		)
	}
}

ctEvents.on('ct:header:sync:item:menu', (changeDescriptor) => {
	const selector = '.header-menu-1'
	handleMenuOptions({ selector, changeDescriptor })
})

ctEvents.on(
	'ct:header:sync:collect-variable-descriptors',
	(variableDescriptors) => {
		variableDescriptors['menu'] = handleMenuVariables
	}
)

🛸 XMAN Replicator

Edit: sync.js

PHP Console

SQL Console