.sytec-theme-headers {
display: contents;
}
.sytec-sticky-header {
position: fixed;
z-index: 1000;
top: var(--sytec-sticky-admin-offset, 0px);
right: 0;
left: 0;
width: 100%;
opacity: 0;
pointer-events: none;
transform: translateY(-100%);
visibility: hidden;
transition:
transform 240ms ease,
opacity 240ms ease,
visibility 0s linear 240ms;
}
.sytec-sticky-header.is-sticky-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
visibility: visible;
transition-delay: 0s;
}
.sytec-sticky-header .sytec-header-row__inner {
min-height: var(--sytec-row-height);
}
.sytec-sticky-header .sytec-builder-logo .custom-logo {
width: min(100%, calc(var(--sytec-element-logo-height-desktop) * var(--sytec-element-logo-aspect-ratio, 1)));
max-width: 100%;
max-height: var(--sytec-element-logo-height-desktop);
height: auto;
}
.sytec-sticky-header__device--mobile .sytec-builder-logo,
.sytec-sticky-header__device--mobile .sytec-builder-logo .custom-logo-link {
width: 100%;
max-width: 100%;
}
.sytec-sticky-header__device--mobile .sytec-header-element--logo {
max-width: 100%;
flex-shrink: 1;
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) {
margin: var(--sytec-menu-margin, 0);
color: var(--sytec-menu-color, var(--sytec-row-link));
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-builder-navigation {
font-family: var(--sytec-menu-font-family, var(--sytec-body-font-family, var(--sytec-font-primary)));
font-size: var(--sytec-menu-font-size-desktop, var(--sytec-body-size-desktop, 16px));
font-style: var(--sytec-menu-font-style, normal);
font-weight: var(--sytec-menu-font-weight, 650);
line-height: var(--sytec-menu-line-height, 1.4);
letter-spacing: var(--sytec-menu-letter-spacing, normal);
text-transform: var(--sytec-menu-text-transform, none);
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-builder-menu {
display: flex;
flex-wrap: nowrap;
justify-content: var(--sytec-menu-alignment, center);
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-builder-menu > li > a {
display: flex;
margin: 0;
padding: var(--sytec-menu-padding-block, 8px) var(--sytec-menu-padding-inline, 10px);
align-items: center;
border: var(--sytec-menu-border-width, 0) var(--sytec-menu-border-style, solid) var(--sytec-menu-border-color, transparent);
border-radius: var(--sytec-menu-radius, 6px);
background: var(--sytec-menu-background, transparent);
box-shadow: var(--sytec-menu-shadow, none);
color: var(--sytec-menu-color, var(--sytec-row-link));
font: inherit;
gap: var(--sytec-menu-icon-gap, 6px);
transition:
background-color var(--sytec-transition),
box-shadow var(--sytec-transition),
color var(--sytec-transition);
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-menu > li > a:hover {
background: var(--sytec-menu-hover-background, rgba(255, 255, 255, 0.1));
box-shadow: var(--sytec-menu-hover-shadow, none);
color: var(--sytec-sticky-link-hover, var(--sytec-menu-hover-color, var(--sytec-menu-color, var(--sytec-row-link))));
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-menu :is(.current-menu-item, .current-menu-parent, .current-menu-ancestor, .current_page_item) > a {
background: var(--sytec-menu-active-background, rgba(255, 255, 255, 0.1));
color: var(--sytec-menu-active-color, var(--sytec-menu-color, var(--sytec-row-link)));
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-menu a:focus-visible {
background: var(--sytec-menu-hover-background, rgba(255, 255, 255, 0.1));
box-shadow: var(--sytec-menu-hover-shadow, none);
color: var(--sytec-menu-focus-color, var(--sytec-sticky-link-hover, var(--sytec-menu-hover-color, var(--sytec-menu-color))));
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-menu .sub-menu {
top: calc(100% + var(--sytec-submenu-offset, 0px));
min-width: var(--sytec-submenu-min-width, 220px);
width: max-content;
max-width: min(90vw, 640px);
padding: var(--sytec-submenu-padding, 8px);
border: var(--sytec-submenu-border-width, 1px) solid var(--sytec-submenu-border-color, var(--sytec-color-border));
border-radius: var(--sytec-submenu-radius, 8px);
background: var(--sytec-submenu-background, #fff);
box-shadow: var(--sytec-submenu-shadow, var(--sytec-shadow-medium));
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-menu .sub-menu a {
color: var(--sytec-submenu-color, var(--sytec-color-primary));
}
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) .sytec-menu .sub-menu a:is(:hover, :focus-visible) {
background: var(--sytec-submenu-hover-background, transparent);
color: var(--sytec-submenu-hover-color, var(--sytec-sticky-link-hover, var(--sytec-menu-hover-color, var(--sytec-color-accent))));
}
.sytec-sticky-header__device--desktop {
display: block;
}
.sytec-sticky-header__device--mobile {
display: none;
}
@media (min-width: 769px) and (max-width: 1024px) {
.sytec-sticky-header :is(
[data-builder-type="primary_menu"],
[data-builder-type="secondary_menu"]
) {
--sytec-menu-gap: 4px;
--sytec-menu-font-size-desktop: 0.78rem;
--sytec-menu-padding-inline: 6px;
}
.sytec-sticky-header .sytec-header-zone {
gap: 0.3rem;
}
}
@media (max-width: 1024px) {
.sytec-sticky-header .sytec-sticky-header__device--desktop {
display: none;
}
.sytec-sticky-header .sytec-sticky-header__device--mobile {
display: block;
}
.sytec-sticky-header .sytec-builder-logo .custom-logo {
width: min(100%, calc(var(--sytec-element-logo-height-tablet) * var(--sytec-element-logo-aspect-ratio, 1)));
max-width: 100%;
max-height: var(--sytec-element-logo-height-tablet);
}
}
@media (max-width: 768px) {
.sytec-sticky-header .sytec-builder-logo .custom-logo {
width: min(100%, calc(var(--sytec-element-logo-height-mobile) * var(--sytec-element-logo-aspect-ratio, 1)));
max-height: var(--sytec-element-logo-height-mobile);
}
}
@media (prefers-reduced-motion: reduce) {
.sytec-sticky-header {
transition: none;
}
}