I’ll build this as a strong standalone navigation.css for RX Theme: desktop menu, mobile drawer, dropdowns, mega menu, breadcrumbs, pagination-style nav, accessibility states, dark mode, RTL, print, and responsive behavior.
Yes dear friend — place this full advanced CSS inside:
assets/static/static-css/components/navigation.css
/*!
Theme Name: RX Theme
File: assets/static/static-css/components/navigation.css
Description: Advanced navigation component styles for RX Theme.
Author: RxHarun
Version: 1.0.0
*/
/* =========================================================
RX THEME NAVIGATION SYSTEM
---------------------------------------------------------
Includes:
- Header navigation
- Primary menu
- Secondary menu
- Mobile menu
- Dropdown menu
- Mega menu
- Sticky navigation
- Breadcrumb navigation
- Pagination navigation
- Post navigation
- Footer navigation
- Accessibility states
- RTL support
- Dark mode support
- Print mode
========================================================= */
/* =========================================================
01. NAVIGATION TOKENS
========================================================= */
:root {
--rx-nav-height: 72px;
--rx-nav-height-compact: 56px;
--rx-nav-mobile-height: 64px;
--rx-nav-bg: var(--rx-color-surface, #ffffff);
--rx-nav-bg-soft: var(--rx-color-surface-soft, #f8fafc);
--rx-nav-bg-muted: var(--rx-color-muted, #f1f5f9);
--rx-nav-bg-dark: #0f172a;
--rx-nav-text: var(--rx-color-text, #111827);
--rx-nav-text-muted: var(--rx-color-text-muted, #64748b);
--rx-nav-text-light: #ffffff;
--rx-nav-link: var(--rx-color-link, #0f766e);
--rx-nav-link-hover: var(--rx-color-link-hover, #0d9488);
--rx-nav-link-active: var(--rx-color-primary, #0f766e);
--rx-nav-border: var(--rx-color-border, #e5e7eb);
--rx-nav-border-strong: #cbd5e1;
--rx-nav-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--rx-nav-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
--rx-nav-shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.16);
--rx-nav-radius-sm: 6px;
--rx-nav-radius-md: 10px;
--rx-nav-radius-lg: 16px;
--rx-nav-radius-pill: 999px;
--rx-nav-gap-xs: 0.35rem;
--rx-nav-gap-sm: 0.5rem;
--rx-nav-gap-md: 0.75rem;
--rx-nav-gap-lg: 1rem;
--rx-nav-gap-xl: 1.5rem;
--rx-nav-z-header: 900;
--rx-nav-z-dropdown: 950;
--rx-nav-z-overlay: 980;
--rx-nav-z-drawer: 1000;
--rx-nav-transition-fast: 160ms ease;
--rx-nav-transition-base: 220ms ease;
--rx-nav-transition-slow: 320ms ease;
--rx-nav-font-size-sm: 0.875rem;
--rx-nav-font-size-md: 0.9375rem;
--rx-nav-font-size-lg: 1rem;
--rx-nav-line-height: 1.4;
}
/* =========================================================
02. BASE RESET FOR NAVIGATION
========================================================= */
.site-navigation,
.rx-navigation,
.rx-primary-navigation,
.rx-secondary-navigation,
.rx-mobile-navigation,
.rx-footer-navigation,
.rx-breadcrumb-navigation,
.rx-pagination-navigation,
.rx-post-navigation {
box-sizing: border-box;
}
.site-navigation *,
.rx-navigation *,
.rx-primary-navigation *,
.rx-secondary-navigation *,
.rx-mobile-navigation *,
.rx-footer-navigation *,
.rx-breadcrumb-navigation *,
.rx-pagination-navigation *,
.rx-post-navigation * {
box-sizing: inherit;
}
.site-navigation ul,
.rx-navigation ul,
.rx-primary-navigation ul,
.rx-secondary-navigation ul,
.rx-mobile-navigation ul,
.rx-footer-navigation ul {
padding: 0;
margin: 0;
list-style: none;
}
.site-navigation a,
.rx-navigation a,
.rx-primary-navigation a,
.rx-secondary-navigation a,
.rx-mobile-navigation a,
.rx-footer-navigation a,
.rx-breadcrumb-navigation a,
.rx-pagination-navigation a,
.rx-post-navigation a {
color: inherit;
text-decoration: none;
}
.site-navigation button,
.rx-navigation button,
.rx-primary-navigation button,
.rx-mobile-navigation button {
font: inherit;
}
/* =========================================================
03. GLOBAL NAVIGATION WRAPPER
========================================================= */
.rx-navigation {
position: relative;
width: 100%;
color: var(--rx-nav-text);
background: var(--rx-nav-bg);
border-bottom: 1px solid var(--rx-nav-border);
z-index: var(--rx-nav-z-header);
}
.rx-navigation__inner {
width: min(100% - 2rem, var(--rx-container-width, 1200px));
min-height: var(--rx-nav-height);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-nav-gap-lg);
}
.rx-navigation__start,
.rx-navigation__center,
.rx-navigation__end {
display: flex;
align-items: center;
gap: var(--rx-nav-gap-md);
}
.rx-navigation__center {
flex: 1 1 auto;
justify-content: center;
}
.rx-navigation__end {
justify-content: flex-end;
}
.rx-navigation--compact .rx-navigation__inner {
min-height: var(--rx-nav-height-compact);
}
.rx-navigation--transparent {
background: transparent;
border-bottom-color: transparent;
box-shadow: none;
}
.rx-navigation--shadow {
box-shadow: var(--rx-nav-shadow-sm);
}
.rx-navigation--borderless {
border-bottom: 0;
}
.rx-navigation--rounded {
border-radius: var(--rx-nav-radius-lg);
}
/* =========================================================
04. STICKY AND FIXED NAVIGATION
========================================================= */
.rx-navigation--sticky {
position: sticky;
top: 0;
z-index: var(--rx-nav-z-header);
}
.admin-bar .rx-navigation--sticky {
top: 32px;
}
.rx-navigation--fixed {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: var(--rx-nav-z-header);
}
.admin-bar .rx-navigation--fixed {
top: 32px;
}
.rx-navigation--sticky.is-scrolled,
.rx-navigation--fixed.is-scrolled {
background: color-mix(in srgb, var(--rx-nav-bg) 92%, transparent);
backdrop-filter: blur(14px);
box-shadow: var(--rx-nav-shadow-md);
}
.rx-navigation-spacer {
height: var(--rx-nav-height);
}
/* =========================================================
05. BRAND / LOGO AREA
========================================================= */
.rx-site-branding,
.rx-navigation__brand {
display: inline-flex;
align-items: center;
gap: var(--rx-nav-gap-sm);
min-width: 0;
}
.rx-site-branding a,
.rx-navigation__brand-link {
display: inline-flex;
align-items: center;
gap: var(--rx-nav-gap-sm);
color: var(--rx-nav-text);
font-weight: 800;
line-height: 1.1;
text-decoration: none;
}
.rx-site-logo,
.rx-navigation__logo {
display: block;
width: auto;
max-width: 180px;
max-height: 48px;
object-fit: contain;
}
.rx-site-title,
.rx-navigation__title {
display: block;
color: var(--rx-nav-text);
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.025em;
white-space: nowrap;
}
.rx-site-description,
.rx-navigation__tagline {
display: block;
color: var(--rx-nav-text-muted);
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.2;
}
/* =========================================================
06. PRIMARY MENU
========================================================= */
.rx-primary-menu,
.primary-menu,
.menu-primary {
display: flex;
align-items: center;
justify-content: center;
gap: var(--rx-nav-gap-xs);
}
.rx-primary-menu > li,
.primary-menu > li,
.menu-primary > li {
position: relative;
display: flex;
align-items: center;
}
.rx-primary-menu > li > a,
.primary-menu > li > a,
.menu-primary > li > a {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 44px;
padding: 0.65rem 0.85rem;
color: var(--rx-nav-text);
font-size: var(--rx-nav-font-size-md);
font-weight: 650;
line-height: var(--rx-nav-line-height);
border-radius: var(--rx-nav-radius-md);
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast),
box-shadow var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-primary-menu > li > a:hover,
.primary-menu > li > a:hover,
.menu-primary > li > a:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
}
.rx-primary-menu > li > a:active,
.primary-menu > li > a:active,
.menu-primary > li > a:active {
transform: translateY(1px);
}
.rx-primary-menu > .current-menu-item > a,
.rx-primary-menu > .current-menu-ancestor > a,
.rx-primary-menu > .current_page_item > a,
.rx-primary-menu > .current_page_ancestor > a,
.primary-menu > .current-menu-item > a,
.primary-menu > .current-menu-ancestor > a,
.menu-primary > .current-menu-item > a,
.menu-primary > .current-menu-ancestor > a {
color: var(--rx-nav-link-active);
background: color-mix(in srgb, var(--rx-nav-link-active) 10%, transparent);
}
.rx-primary-menu > li > a::after,
.primary-menu > li > a::after,
.menu-primary > li > a::after {
content: "";
position: absolute;
inset-inline: 50%;
inset-block-end: 0.35rem;
height: 2px;
background: currentColor;
border-radius: var(--rx-nav-radius-pill);
opacity: 0;
transform: translateX(-50%) scaleX(0);
transform-origin: center;
transition:
opacity var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-primary-menu > li > a:hover::after,
.rx-primary-menu > .current-menu-item > a::after,
.rx-primary-menu > .current-menu-ancestor > a::after,
.primary-menu > li > a:hover::after,
.primary-menu > .current-menu-item > a::after,
.menu-primary > li > a:hover::after,
.menu-primary > .current-menu-item > a::after {
inset-inline: 0.85rem;
opacity: 1;
transform: none;
}
/* =========================================================
07. MENU ITEMS WITH ICONS / BADGES
========================================================= */
.rx-menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
}
.rx-menu-icon svg {
width: 1em;
height: 1em;
fill: currentColor;
}
.rx-menu-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
min-height: 1.25rem;
padding: 0.1rem 0.4rem;
color: #ffffff;
background: var(--rx-nav-link-active);
border-radius: var(--rx-nav-radius-pill);
font-size: 0.6875rem;
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
}
.rx-menu-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================
08. DROPDOWN MENU
========================================================= */
.rx-primary-menu .sub-menu,
.primary-menu .sub-menu,
.menu-primary .sub-menu {
position: absolute;
inset-block-start: calc(100% + 0.5rem);
inset-inline-start: 0;
min-width: 230px;
padding: 0.5rem;
background: var(--rx-nav-bg);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-lg);
box-shadow: var(--rx-nav-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.98);
transform-origin: top left;
transition:
opacity var(--rx-nav-transition-base),
visibility var(--rx-nav-transition-base),
transform var(--rx-nav-transition-base);
z-index: var(--rx-nav-z-dropdown);
}
.rx-primary-menu li:hover > .sub-menu,
.rx-primary-menu li:focus-within > .sub-menu,
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu,
.menu-primary li:hover > .sub-menu,
.menu-primary li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.rx-primary-menu .sub-menu li,
.primary-menu .sub-menu li,
.menu-primary .sub-menu li {
position: relative;
}
.rx-primary-menu .sub-menu a,
.primary-menu .sub-menu a,
.menu-primary .sub-menu a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-nav-gap-sm);
width: 100%;
padding: 0.72rem 0.8rem;
color: var(--rx-nav-text);
font-size: var(--rx-nav-font-size-sm);
font-weight: 600;
line-height: var(--rx-nav-line-height);
border-radius: var(--rx-nav-radius-md);
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast),
padding var(--rx-nav-transition-fast);
}
.rx-primary-menu .sub-menu a:hover,
.rx-primary-menu .sub-menu a:focus-visible,
.primary-menu .sub-menu a:hover,
.primary-menu .sub-menu a:focus-visible,
.menu-primary .sub-menu a:hover,
.menu-primary .sub-menu a:focus-visible {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
padding-inline-start: 1rem;
}
.rx-primary-menu .sub-menu .sub-menu,
.primary-menu .sub-menu .sub-menu,
.menu-primary .sub-menu .sub-menu {
inset-block-start: -0.5rem;
inset-inline-start: calc(100% + 0.5rem);
}
.rx-primary-menu .menu-item-has-children > a,
.primary-menu .menu-item-has-children > a,
.menu-primary .menu-item-has-children > a {
padding-inline-end: 1rem;
}
.rx-primary-menu .menu-item-has-children > a::before,
.primary-menu .menu-item-has-children > a::before,
.menu-primary .menu-item-has-children > a::before {
content: "";
width: 0.45em;
height: 0.45em;
margin-inline-start: 0.25rem;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
opacity: 0.65;
}
.rx-primary-menu .sub-menu .menu-item-has-children > a::before,
.primary-menu .sub-menu .menu-item-has-children > a::before,
.menu-primary .sub-menu .menu-item-has-children > a::before {
transform: rotate(-45deg);
}
/* Dropdown edge protection */
.rx-primary-menu > li:last-child > .sub-menu,
.primary-menu > li:last-child > .sub-menu,
.menu-primary > li:last-child > .sub-menu {
inset-inline-start: auto;
inset-inline-end: 0;
transform-origin: top right;
}
.rx-primary-menu > li:last-child .sub-menu .sub-menu,
.primary-menu > li:last-child .sub-menu .sub-menu,
.menu-primary > li:last-child .sub-menu .sub-menu {
inset-inline-start: auto;
inset-inline-end: calc(100% + 0.5rem);
}
/* =========================================================
09. MEGA MENU
========================================================= */
.rx-primary-menu .rx-mega-menu,
.primary-menu .rx-mega-menu,
.menu-primary .rx-mega-menu {
position: static;
}
.rx-primary-menu .rx-mega-menu > .sub-menu,
.primary-menu .rx-mega-menu > .sub-menu,
.menu-primary .rx-mega-menu > .sub-menu {
inset-inline-start: 50%;
width: min(100vw - 2rem, var(--rx-container-width, 1200px));
min-width: 720px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--rx-nav-gap-sm);
padding: 1rem;
transform: translateX(-50%) translateY(8px) scale(0.98);
}
.rx-primary-menu .rx-mega-menu:hover > .sub-menu,
.rx-primary-menu .rx-mega-menu:focus-within > .sub-menu,
.primary-menu .rx-mega-menu:hover > .sub-menu,
.primary-menu .rx-mega-menu:focus-within > .sub-menu,
.menu-primary .rx-mega-menu:hover > .sub-menu,
.menu-primary .rx-mega-menu:focus-within > .sub-menu {
transform: translateX(-50%) translateY(0) scale(1);
}
.rx-primary-menu .rx-mega-menu > .sub-menu > li > a,
.primary-menu .rx-mega-menu > .sub-menu > li > a,
.menu-primary .rx-mega-menu > .sub-menu > li > a {
color: var(--rx-nav-text);
background: transparent;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rx-primary-menu .rx-mega-menu > .sub-menu > li > .sub-menu,
.primary-menu .rx-mega-menu > .sub-menu > li > .sub-menu,
.menu-primary .rx-mega-menu > .sub-menu > li > .sub-menu {
position: static;
display: block;
min-width: 0;
padding: 0.2rem 0 0;
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
}
.rx-primary-menu .rx-mega-menu > .sub-menu > li > .sub-menu a,
.primary-menu .rx-mega-menu > .sub-menu > li > .sub-menu a,
.menu-primary .rx-mega-menu > .sub-menu > li > .sub-menu a {
padding-block: 0.5rem;
color: var(--rx-nav-text-muted);
font-weight: 600;
}
.rx-primary-menu .rx-mega-menu > .sub-menu > li > .sub-menu a:hover,
.primary-menu .rx-mega-menu > .sub-menu > li > .sub-menu a:hover,
.menu-primary .rx-mega-menu > .sub-menu > li > .sub-menu a:hover {
color: var(--rx-nav-link-hover);
}
/* =========================================================
10. SECONDARY / TOPBAR MENU
========================================================= */
.rx-topbar,
.rx-secondary-navigation {
color: var(--rx-nav-text-muted);
background: var(--rx-nav-bg-soft);
border-bottom: 1px solid var(--rx-nav-border);
font-size: var(--rx-nav-font-size-sm);
}
.rx-topbar__inner,
.rx-secondary-navigation__inner {
width: min(100% - 2rem, var(--rx-container-width, 1200px));
min-height: 38px;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-nav-gap-md);
}
.rx-secondary-menu,
.secondary-menu {
display: flex;
align-items: center;
gap: var(--rx-nav-gap-md);
}
.rx-secondary-menu a,
.secondary-menu a {
color: var(--rx-nav-text-muted);
font-weight: 600;
transition: color var(--rx-nav-transition-fast);
}
.rx-secondary-menu a:hover,
.secondary-menu a:hover {
color: var(--rx-nav-link-hover);
}
/* =========================================================
11. HEADER ACTION BUTTONS
========================================================= */
.rx-nav-actions {
display: inline-flex;
align-items: center;
gap: var(--rx-nav-gap-sm);
}
.rx-nav-action,
.rx-search-toggle,
.rx-theme-toggle,
.rx-account-link,
.rx-cart-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
min-width: 42px;
height: 42px;
color: var(--rx-nav-text);
background: transparent;
border: 1px solid transparent;
border-radius: var(--rx-nav-radius-pill);
cursor: pointer;
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast),
box-shadow var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-nav-action:hover,
.rx-search-toggle:hover,
.rx-theme-toggle:hover,
.rx-account-link:hover,
.rx-cart-link:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
border-color: var(--rx-nav-border);
}
.rx-nav-action:active,
.rx-search-toggle:active,
.rx-theme-toggle:active,
.rx-account-link:active,
.rx-cart-link:active {
transform: translateY(1px);
}
.rx-nav-action svg,
.rx-search-toggle svg,
.rx-theme-toggle svg,
.rx-account-link svg,
.rx-cart-link svg {
width: 1.25rem;
height: 1.25rem;
fill: currentColor;
}
.rx-cart-count,
.rx-notification-count {
position: absolute;
inset-block-start: 0.15rem;
inset-inline-end: 0.1rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.1rem;
height: 1.1rem;
padding-inline: 0.25rem;
color: #ffffff;
background: #dc2626;
border: 2px solid var(--rx-nav-bg);
border-radius: var(--rx-nav-radius-pill);
font-size: 0.65rem;
font-weight: 800;
line-height: 1;
}
/* =========================================================
12. NAVIGATION BUTTON / CTA
========================================================= */
.rx-nav-cta,
.rx-navigation .button,
.rx-navigation .wp-block-button__link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--rx-nav-gap-xs);
min-height: 42px;
padding: 0.65rem 1rem;
color: #ffffff;
background: var(--rx-nav-link-active);
border: 1px solid var(--rx-nav-link-active);
border-radius: var(--rx-nav-radius-pill);
font-size: var(--rx-nav-font-size-sm);
font-weight: 800;
line-height: 1;
text-decoration: none;
box-shadow: 0 8px 18px color-mix(in srgb, var(--rx-nav-link-active) 25%, transparent);
transition:
background-color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast),
box-shadow var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-nav-cta:hover,
.rx-navigation .button:hover,
.rx-navigation .wp-block-button__link:hover {
color: #ffffff;
background: var(--rx-nav-link-hover);
border-color: var(--rx-nav-link-hover);
transform: translateY(-1px);
}
.rx-nav-cta:active,
.rx-navigation .button:active,
.rx-navigation .wp-block-button__link:active {
transform: translateY(0);
}
/* =========================================================
13. MOBILE MENU TOGGLE
========================================================= */
.rx-mobile-toggle,
.menu-toggle,
.navbar-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: var(--rx-nav-text);
background: transparent;
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-md);
cursor: pointer;
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast);
}
.rx-mobile-toggle:hover,
.menu-toggle:hover,
.navbar-toggle:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
border-color: var(--rx-nav-border-strong);
}
.rx-mobile-toggle__icon,
.menu-toggle__icon {
position: relative;
width: 22px;
height: 16px;
}
.rx-mobile-toggle__icon span,
.menu-toggle__icon span {
position: absolute;
inset-inline: 0;
height: 2px;
background: currentColor;
border-radius: var(--rx-nav-radius-pill);
transition:
transform var(--rx-nav-transition-base),
opacity var(--rx-nav-transition-base),
top var(--rx-nav-transition-base);
}
.rx-mobile-toggle__icon span:nth-child(1),
.menu-toggle__icon span:nth-child(1) {
top: 0;
}
.rx-mobile-toggle__icon span:nth-child(2),
.menu-toggle__icon span:nth-child(2) {
top: 7px;
}
.rx-mobile-toggle__icon span:nth-child(3),
.menu-toggle__icon span:nth-child(3) {
top: 14px;
}
.rx-mobile-toggle[aria-expanded="true"] .rx-mobile-toggle__icon span:nth-child(1),
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(1) {
top: 7px;
transform: rotate(45deg);
}
.rx-mobile-toggle[aria-expanded="true"] .rx-mobile-toggle__icon span:nth-child(2),
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(2) {
opacity: 0;
}
.rx-mobile-toggle[aria-expanded="true"] .rx-mobile-toggle__icon span:nth-child(3),
.menu-toggle[aria-expanded="true"] .menu-toggle__icon span:nth-child(3) {
top: 7px;
transform: rotate(-45deg);
}
/* =========================================================
14. MOBILE DRAWER NAVIGATION
========================================================= */
.rx-mobile-drawer {
position: fixed;
inset-block: 0;
inset-inline-start: 0;
width: min(90vw, 380px);
color: var(--rx-nav-text);
background: var(--rx-nav-bg);
border-inline-end: 1px solid var(--rx-nav-border);
box-shadow: var(--rx-nav-shadow-lg);
overflow-y: auto;
overscroll-behavior: contain;
transform: translateX(-105%);
transition: transform var(--rx-nav-transition-slow);
z-index: var(--rx-nav-z-drawer);
}
.rx-mobile-drawer.is-open,
body.rx-mobile-menu-open .rx-mobile-drawer {
transform: translateX(0);
}
.rx-mobile-drawer__header {
position: sticky;
top: 0;
min-height: var(--rx-nav-mobile-height);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-nav-gap-md);
padding: 0.75rem 1rem;
background: var(--rx-nav-bg);
border-bottom: 1px solid var(--rx-nav-border);
z-index: 1;
}
.rx-mobile-drawer__body {
padding: 1rem;
}
.rx-mobile-drawer__footer {
padding: 1rem;
border-top: 1px solid var(--rx-nav-border);
}
.rx-mobile-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--rx-nav-text);
background: var(--rx-nav-bg-soft);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-pill);
cursor: pointer;
}
.rx-mobile-close:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-muted);
}
.rx-mobile-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
opacity: 0;
visibility: hidden;
transition:
opacity var(--rx-nav-transition-base),
visibility var(--rx-nav-transition-base);
z-index: var(--rx-nav-z-overlay);
}
.rx-mobile-overlay.is-open,
body.rx-mobile-menu-open .rx-mobile-overlay {
opacity: 1;
visibility: visible;
}
body.rx-mobile-menu-open {
overflow: hidden;
}
/* =========================================================
15. MOBILE MENU LIST
========================================================= */
.rx-mobile-menu,
.mobile-menu {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.rx-mobile-menu li,
.mobile-menu li {
position: relative;
}
.rx-mobile-menu a,
.mobile-menu a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rx-nav-gap-sm);
min-height: 44px;
padding: 0.75rem 0.85rem;
color: var(--rx-nav-text);
font-size: var(--rx-nav-font-size-md);
font-weight: 700;
line-height: var(--rx-nav-line-height);
border-radius: var(--rx-nav-radius-md);
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast);
}
.rx-mobile-menu a:hover,
.rx-mobile-menu a:focus-visible,
.mobile-menu a:hover,
.mobile-menu a:focus-visible {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
}
.rx-mobile-menu .current-menu-item > a,
.rx-mobile-menu .current-menu-ancestor > a,
.mobile-menu .current-menu-item > a,
.mobile-menu .current-menu-ancestor > a {
color: var(--rx-nav-link-active);
background: color-mix(in srgb, var(--rx-nav-link-active) 10%, transparent);
}
.rx-mobile-menu .sub-menu,
.mobile-menu .sub-menu {
display: none;
padding-inline-start: 0.75rem;
margin-block: 0.25rem 0.35rem;
border-inline-start: 2px solid var(--rx-nav-border);
}
.rx-mobile-menu .is-open > .sub-menu,
.rx-mobile-menu .menu-item-has-children:focus-within > .sub-menu,
.mobile-menu .is-open > .sub-menu,
.mobile-menu .menu-item-has-children:focus-within > .sub-menu {
display: block;
}
.rx-mobile-menu .sub-menu a,
.mobile-menu .sub-menu a {
min-height: 40px;
color: var(--rx-nav-text-muted);
font-size: var(--rx-nav-font-size-sm);
font-weight: 650;
}
.rx-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
margin-inline-start: auto;
color: inherit;
background: transparent;
border: 0;
border-radius: var(--rx-nav-radius-pill);
cursor: pointer;
}
.rx-submenu-toggle:hover {
background: var(--rx-nav-bg-muted);
}
.rx-submenu-toggle::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-inline-end: 2px solid currentColor;
border-block-end: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--rx-nav-transition-fast);
}
.is-open > a .rx-submenu-toggle::before,
.rx-submenu-toggle[aria-expanded="true"]::before {
transform: rotate(225deg) translateY(-2px);
}
/* =========================================================
16. SEARCH FORM INSIDE NAVIGATION
========================================================= */
.rx-nav-search {
position: relative;
width: min(100%, 320px);
}
.rx-nav-search form {
position: relative;
display: flex;
align-items: center;
}
.rx-nav-search input[type="search"] {
width: 100%;
min-height: 42px;
padding: 0.65rem 2.75rem 0.65rem 1rem;
color: var(--rx-nav-text);
background: var(--rx-nav-bg-soft);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-pill);
font-size: var(--rx-nav-font-size-sm);
outline: none;
transition:
background-color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast),
box-shadow var(--rx-nav-transition-fast);
}
.rx-nav-search input[type="search"]:focus {
background: var(--rx-nav-bg);
border-color: var(--rx-nav-link-active);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--rx-nav-link-active) 18%, transparent);
}
.rx-nav-search button[type="submit"] {
position: absolute;
inset-inline-end: 0.25rem;
width: 36px;
height: 36px;
color: var(--rx-nav-text-muted);
background: transparent;
border: 0;
border-radius: var(--rx-nav-radius-pill);
cursor: pointer;
}
.rx-nav-search button[type="submit"]:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-muted);
}
/* =========================================================
17. BREADCRUMB NAVIGATION
========================================================= */
.rx-breadcrumb-navigation,
.breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb {
width: min(100% - 2rem, var(--rx-container-width, 1200px));
margin: 1rem auto;
color: var(--rx-nav-text-muted);
font-size: var(--rx-nav-font-size-sm);
}
.rx-breadcrumb-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
padding: 0;
margin: 0;
list-style: none;
}
.rx-breadcrumb-item {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.rx-breadcrumb-item:not(:last-child)::after,
.breadcrumbs .separator,
.rank-math-breadcrumb .separator {
content: "/";
color: var(--rx-nav-border-strong);
margin-inline: 0.15rem;
}
.rx-breadcrumb-navigation a,
.breadcrumbs a,
.rank-math-breadcrumb a,
.yoast-breadcrumb a {
color: var(--rx-nav-text-muted);
font-weight: 650;
text-decoration: none;
}
.rx-breadcrumb-navigation a:hover,
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
.yoast-breadcrumb a:hover {
color: var(--rx-nav-link-hover);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.rx-breadcrumb-current,
.rx-breadcrumb-item[aria-current="page"],
.breadcrumb_last {
color: var(--rx-nav-text);
font-weight: 700;
}
/* =========================================================
18. PAGINATION NAVIGATION
========================================================= */
.rx-pagination-navigation,
.pagination,
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--rx-nav-gap-sm);
width: 100%;
margin-block: 2rem;
}
.rx-pagination-navigation .page-numbers,
.pagination .page-numbers,
.nav-links .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding-inline: 0.75rem;
color: var(--rx-nav-text);
background: var(--rx-nav-bg);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-md);
font-size: var(--rx-nav-font-size-sm);
font-weight: 800;
line-height: 1;
text-decoration: none;
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast),
box-shadow var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-pagination-navigation a.page-numbers:hover,
.pagination a.page-numbers:hover,
.nav-links a.page-numbers:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
border-color: var(--rx-nav-link-hover);
transform: translateY(-1px);
}
.rx-pagination-navigation .page-numbers.current,
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
color: #ffffff;
background: var(--rx-nav-link-active);
border-color: var(--rx-nav-link-active);
box-shadow: 0 8px 18px color-mix(in srgb, var(--rx-nav-link-active) 25%, transparent);
}
.rx-pagination-navigation .page-numbers.dots,
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
border-color: transparent;
background: transparent;
box-shadow: none;
}
/* =========================================================
19. POST NEXT / PREVIOUS NAVIGATION
========================================================= */
.rx-post-navigation,
.post-navigation {
margin-block: 2.5rem;
}
.rx-post-navigation .nav-links,
.post-navigation .nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--rx-nav-gap-lg);
}
.rx-post-navigation .nav-previous,
.rx-post-navigation .nav-next,
.post-navigation .nav-previous,
.post-navigation .nav-next {
min-width: 0;
}
.rx-post-navigation .nav-next,
.post-navigation .nav-next {
text-align: end;
}
.rx-post-navigation a,
.post-navigation a {
display: block;
height: 100%;
padding: 1rem;
color: var(--rx-nav-text);
background: var(--rx-nav-bg);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-lg);
box-shadow: var(--rx-nav-shadow-sm);
transition:
color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast),
box-shadow var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-post-navigation a:hover,
.post-navigation a:hover {
color: var(--rx-nav-link-hover);
border-color: var(--rx-nav-link-hover);
box-shadow: var(--rx-nav-shadow-md);
transform: translateY(-2px);
}
.rx-post-navigation .meta-nav,
.post-navigation .meta-nav {
display: block;
margin-block-end: 0.35rem;
color: var(--rx-nav-text-muted);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.rx-post-navigation .post-title,
.post-navigation .post-title {
display: block;
font-size: 1rem;
font-weight: 800;
line-height: 1.35;
}
/* =========================================================
20. FOOTER NAVIGATION
========================================================= */
.rx-footer-navigation,
.footer-navigation {
color: var(--rx-nav-text-muted);
}
.rx-footer-menu,
.footer-menu {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--rx-nav-gap-sm) var(--rx-nav-gap-lg);
}
.rx-footer-menu a,
.footer-menu a {
color: var(--rx-nav-text-muted);
font-size: var(--rx-nav-font-size-sm);
font-weight: 650;
transition: color var(--rx-nav-transition-fast);
}
.rx-footer-menu a:hover,
.footer-menu a:hover {
color: var(--rx-nav-link-hover);
text-decoration: underline;
text-underline-offset: 0.25em;
}
/* =========================================================
21. SOCIAL NAVIGATION
========================================================= */
.rx-social-navigation,
.social-navigation {
display: flex;
align-items: center;
gap: var(--rx-nav-gap-sm);
}
.rx-social-navigation a,
.social-navigation a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
color: var(--rx-nav-text-muted);
background: var(--rx-nav-bg-soft);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-pill);
transition:
color var(--rx-nav-transition-fast),
background-color var(--rx-nav-transition-fast),
border-color var(--rx-nav-transition-fast),
transform var(--rx-nav-transition-fast);
}
.rx-social-navigation a:hover,
.social-navigation a:hover {
color: #ffffff;
background: var(--rx-nav-link-active);
border-color: var(--rx-nav-link-active);
transform: translateY(-2px);
}
.rx-social-navigation svg,
.social-navigation svg {
width: 1rem;
height: 1rem;
fill: currentColor;
}
/* =========================================================
22. ACCESSIBILITY
========================================================= */
.rx-navigation a:focus-visible,
.rx-navigation button:focus-visible,
.rx-mobile-drawer a:focus-visible,
.rx-mobile-drawer button:focus-visible,
.rx-breadcrumb-navigation a:focus-visible,
.rx-pagination-navigation a:focus-visible,
.rx-post-navigation a:focus-visible {
outline: 3px solid color-mix(in srgb, var(--rx-nav-link-active) 45%, transparent);
outline-offset: 3px;
}
.rx-navigation .screen-reader-text,
.rx-mobile-drawer .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.rx-navigation .screen-reader-text:focus,
.rx-mobile-drawer .screen-reader-text:focus {
position: static;
width: auto;
height: auto;
margin: 0;
overflow: visible;
clip-path: none;
white-space: normal;
}
/* Skip link */
.rx-skip-link,
.skip-link {
position: absolute;
inset-block-start: -100px;
inset-inline-start: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0.75rem 1rem;
color: #ffffff;
background: var(--rx-nav-link-active);
border-radius: var(--rx-nav-radius-md);
font-weight: 800;
z-index: 99999;
}
.rx-skip-link:focus,
.skip-link:focus {
inset-block-start: 1rem;
}
/* =========================================================
23. DARK MODE
========================================================= */
[data-theme="dark"] .rx-navigation,
.dark .rx-navigation,
body.dark-mode .rx-navigation {
--rx-nav-bg: #0f172a;
--rx-nav-bg-soft: #111c31;
--rx-nav-bg-muted: #1e293b;
--rx-nav-text: #f8fafc;
--rx-nav-text-muted: #cbd5e1;
--rx-nav-border: rgba(148, 163, 184, 0.24);
--rx-nav-border-strong: rgba(203, 213, 225, 0.38);
--rx-nav-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--rx-nav-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.42);
--rx-nav-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .rx-topbar,
.dark .rx-topbar,
body.dark-mode .rx-topbar,
[data-theme="dark"] .rx-secondary-navigation,
.dark .rx-secondary-navigation,
body.dark-mode .rx-secondary-navigation {
background: #111827;
border-color: rgba(148, 163, 184, 0.2);
}
[data-theme="dark"] .rx-mobile-drawer,
.dark .rx-mobile-drawer,
body.dark-mode .rx-mobile-drawer {
--rx-nav-bg: #0f172a;
--rx-nav-bg-soft: #111c31;
--rx-nav-bg-muted: #1e293b;
--rx-nav-text: #f8fafc;
--rx-nav-text-muted: #cbd5e1;
--rx-nav-border: rgba(148, 163, 184, 0.24);
}
/* Auto dark mode fallback */
@media (prefers-color-scheme: dark) {
body:not([data-theme="light"]) .rx-navigation.rx-navigation--auto-dark {
--rx-nav-bg: #0f172a;
--rx-nav-bg-soft: #111c31;
--rx-nav-bg-muted: #1e293b;
--rx-nav-text: #f8fafc;
--rx-nav-text-muted: #cbd5e1;
--rx-nav-border: rgba(148, 163, 184, 0.24);
}
}
/* =========================================================
24. RESPONSIVE DESIGN
========================================================= */
@media (max-width: 1180px) {
.rx-primary-menu > li > a,
.primary-menu > li > a,
.menu-primary > li > a {
padding-inline: 0.65rem;
font-size: 0.9rem;
}
.rx-primary-menu .rx-mega-menu > .sub-menu,
.primary-menu .rx-mega-menu > .sub-menu,
.menu-primary .rx-mega-menu > .sub-menu {
min-width: 640px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
.rx-navigation__inner {
min-height: var(--rx-nav-mobile-height);
}
.rx-navigation__center,
.rx-primary-navigation,
.site-navigation .rx-primary-menu,
.site-navigation .primary-menu,
.site-navigation .menu-primary {
display: none;
}
.rx-mobile-toggle,
.menu-toggle,
.navbar-toggle {
display: inline-flex;
}
.rx-nav-search {
display: none;
}
.rx-topbar,
.rx-secondary-navigation {
display: none;
}
}
@media (max-width: 782px) {
.admin-bar .rx-navigation--sticky,
.admin-bar .rx-navigation--fixed {
top: 46px;
}
}
@media (max-width: 768px) {
.rx-navigation__inner {
width: min(100% - 1rem, var(--rx-container-width, 1200px));
}
.rx-site-logo,
.rx-navigation__logo {
max-width: 150px;
max-height: 42px;
}
.rx-site-title,
.rx-navigation__title {
font-size: 1.05rem;
}
.rx-site-description,
.rx-navigation__tagline {
display: none;
}
.rx-nav-cta {
display: none;
}
.rx-post-navigation .nav-links,
.post-navigation .nav-links {
grid-template-columns: 1fr;
}
.rx-post-navigation .nav-next,
.post-navigation .nav-next {
text-align: start;
}
.rx-pagination-navigation,
.pagination,
.nav-links {
flex-wrap: wrap;
}
}
@media (max-width: 480px) {
.rx-mobile-drawer {
width: min(94vw, 360px);
}
.rx-navigation__inner {
gap: var(--rx-nav-gap-sm);
}
.rx-nav-actions {
gap: 0.25rem;
}
.rx-nav-action,
.rx-search-toggle,
.rx-theme-toggle,
.rx-account-link,
.rx-cart-link {
width: 38px;
min-width: 38px;
height: 38px;
}
.rx-pagination-navigation .page-numbers,
.pagination .page-numbers,
.nav-links .page-numbers {
min-width: 38px;
height: 38px;
padding-inline: 0.6rem;
}
}
/* =========================================================
25. RTL SUPPORT
========================================================= */
[dir="rtl"] .rx-primary-menu .sub-menu,
.rtl .rx-primary-menu .sub-menu,
[dir="rtl"] .primary-menu .sub-menu,
.rtl .primary-menu .sub-menu,
[dir="rtl"] .menu-primary .sub-menu,
.rtl .menu-primary .sub-menu {
transform-origin: top right;
}
[dir="rtl"] .rx-primary-menu .sub-menu .sub-menu,
.rtl .rx-primary-menu .sub-menu .sub-menu,
[dir="rtl"] .primary-menu .sub-menu .sub-menu,
.rtl .primary-menu .sub-menu .sub-menu,
[dir="rtl"] .menu-primary .sub-menu .sub-menu,
.rtl .menu-primary .sub-menu .sub-menu {
inset-inline-start: auto;
inset-inline-end: calc(100% + 0.5rem);
}
[dir="rtl"] .rx-primary-menu .sub-menu .menu-item-has-children > a::before,
.rtl .rx-primary-menu .sub-menu .menu-item-has-children > a::before {
transform: rotate(135deg);
}
[dir="rtl"] .rx-mobile-drawer,
.rtl .rx-mobile-drawer {
inset-inline-start: auto;
inset-inline-end: 0;
transform: translateX(105%);
}
[dir="rtl"] .rx-mobile-drawer.is-open,
.rtl .rx-mobile-drawer.is-open,
[dir="rtl"] body.rx-mobile-menu-open .rx-mobile-drawer,
.rtl body.rx-mobile-menu-open .rx-mobile-drawer {
transform: translateX(0);
}
/* =========================================================
26. HIGH CONTRAST MODE
========================================================= */
@media (prefers-contrast: more) {
.rx-navigation,
.rx-mobile-drawer {
--rx-nav-border: currentColor;
}
.rx-primary-menu > li > a,
.primary-menu > li > a,
.menu-primary > li > a,
.rx-mobile-menu a,
.mobile-menu a,
.rx-pagination-navigation .page-numbers {
border: 1px solid transparent;
}
.rx-primary-menu > li > a:hover,
.primary-menu > li > a:hover,
.menu-primary > li > a:hover,
.rx-mobile-menu a:hover,
.mobile-menu a:hover {
border-color: currentColor;
}
}
/* =========================================================
27. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rx-navigation *,
.rx-mobile-drawer,
.rx-mobile-overlay,
.rx-primary-menu .sub-menu,
.primary-menu .sub-menu,
.menu-primary .sub-menu {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* =========================================================
28. TOUCH DEVICE BEHAVIOR
========================================================= */
@media (hover: none) {
.rx-primary-menu > li > a:hover,
.primary-menu > li > a:hover,
.menu-primary > li > a:hover {
background: transparent;
}
.rx-primary-menu > li > a::after,
.primary-menu > li > a::after,
.menu-primary > li > a::after {
display: none;
}
}
/* =========================================================
29. PRINT MODE
========================================================= */
@media print {
.rx-navigation,
.rx-topbar,
.rx-secondary-navigation,
.rx-mobile-drawer,
.rx-mobile-overlay,
.rx-mobile-toggle,
.menu-toggle,
.navbar-toggle,
.rx-pagination-navigation,
.pagination,
.rx-nav-actions,
.rx-nav-search {
display: none !important;
}
.rx-breadcrumb-navigation {
color: #000000;
margin-block: 0 1rem;
}
.rx-breadcrumb-navigation a {
color: #000000;
text-decoration: none;
}
}
/* =========================================================
30. UTILITY MODIFIERS
========================================================= */
.rx-nav-hidden {
display: none !important;
}
.rx-nav-visible {
display: block !important;
}
.rx-nav-align-start {
justify-content: flex-start !important;
}
.rx-nav-align-center {
justify-content: center !important;
}
.rx-nav-align-end {
justify-content: flex-end !important;
}
.rx-nav-full-width {
width: 100% !important;
}
.rx-nav-no-border {
border: 0 !important;
}
.rx-nav-no-shadow {
box-shadow: none !important;
}
.rx-nav-scroll-x {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.rx-nav-scroll-x::-webkit-scrollbar {
height: 6px;
}
.rx-nav-scroll-x::-webkit-scrollbar-thumb {
background: var(--rx-nav-border-strong);
border-radius: var(--rx-nav-radius-pill);
}
/* =========================================================
31. WORDPRESS CORE MENU COMPATIBILITY
========================================================= */
.main-navigation {
position: relative;
width: 100%;
}
.main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.main-navigation .menu {
display: flex;
align-items: center;
gap: var(--rx-nav-gap-xs);
}
.main-navigation .menu > li > a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0.65rem 0.85rem;
color: var(--rx-nav-text);
font-size: var(--rx-nav-font-size-md);
font-weight: 650;
border-radius: var(--rx-nav-radius-md);
}
.main-navigation .menu > li > a:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: var(--rx-nav-link-active);
}
.main-navigation .sub-menu {
position: absolute;
inset-block-start: calc(100% + 0.5rem);
inset-inline-start: 0;
min-width: 230px;
padding: 0.5rem;
background: var(--rx-nav-bg);
border: 1px solid var(--rx-nav-border);
border-radius: var(--rx-nav-radius-lg);
box-shadow: var(--rx-nav-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity var(--rx-nav-transition-base),
visibility var(--rx-nav-transition-base),
transform var(--rx-nav-transition-base);
z-index: var(--rx-nav-z-dropdown);
}
.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.main-navigation .sub-menu a {
padding: 0.72rem 0.8rem;
color: var(--rx-nav-text);
font-size: var(--rx-nav-font-size-sm);
font-weight: 600;
border-radius: var(--rx-nav-radius-md);
}
.main-navigation .sub-menu a:hover {
color: var(--rx-nav-link-hover);
background: var(--rx-nav-bg-soft);
}
@media (max-width: 1024px) {
.main-navigation .menu {
display: none;
}
.main-navigation.toggled .menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.25rem;
padding: 1rem;
background: var(--rx-nav-bg);
border-top: 1px solid var(--rx-nav-border);
}
.main-navigation.toggled .sub-menu {
position: static;
display: none;
box-shadow: none;
border: 0;
opacity: 1;
visibility: visible;
transform: none;
}
.main-navigation.toggled .menu-item-has-children:focus-within > .sub-menu,
.main-navigation.toggled .menu-item-has-children.is-open > .sub-menu {
display: block;
}
}Recommended enqueue name:
wp_enqueue_style(
'rx-navigation',
get_theme_file_uri('/assets/static/static-css/components/navigation.css'),
array(),
RX_THEME_VERSION
);Best loading order:
base/reset.css
base/variables.css
layout/header.css
components/navigation.css
components/buttons.css
utilities/responsive.cssThis file is advanced enough for now, but later you can split it into smaller files like:
navigation.css
navigation-dropdown.css
navigation-mobile.css
navigation-mega-menu.css
navigation-breadcrumb.css
navigation-pagination.css