/* 1) Dropdown: add 5px top padding */ .main-nav ul.sub-menu{ padding-top: 10px !important; } /* 2) Dropdown dividers: inset 2px from left and right */ .main-nav ul.sub-menu > li > a{ position: relative; } .main-nav ul.sub-menu > li:not(:last-child) > a::after{ content: ""; position: absolute; left: 2px; right: 10px; bottom: 0; height: 1px; background: #86BC25; } /* Keep the hover underline above the dropdown */ .main-nav .menu-item-has-children{ position: relative; } /* Raise the link (and its underline) above the submenu */ .main-nav .menu-item-has-children > a.elementor-item{ position: relative; z-index: 20; } /* If your underline is built with ::before or ::after, raise it too */ .main-nav .menu-item-has-children > a.elementor-item::before, .main-nav .menu-item-has-children > a.elementor-item::after{ z-index: 21; pointer-events: none; } /* Put submenu under the underline */ .main-nav .menu-item-has-children > .sub-menu{ position: absolute; z-index: 10; } /* Arrow flip (rotate in place, no shifting) */ .main-nav a.has-submenu .sub-arrow{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 !important; margin-inline-start: 8px !important; padding: 0 !important; line-height: 1; vertical-align: middle; transition: transform 0.1s ease; transform-origin: 50% 50%; will-change: transform; backface-visibility: hidden; } /* Make sure the SVG doesn’t affect sizing */ .main-nav a.has-submenu .sub-arrow svg{ display: block; width: 14px; height: 14px; pointer-events: none; } /* Flip on hover / focus / aria-expanded */ .main-nav .menu-item-has-children:hover > a.has-submenu .sub-arrow, .main-nav .menu-item-has-children:focus-within > a.has-submenu .sub-arrow, .main-nav a.has-submenu[aria-expanded="true"] .sub-arrow{ transform: rotate(180deg); } /* Move dropdown slightly left without breaking the animation */ @media (min-width: 1025px){ .main-nav ul.sub-menu.elementor-nav-menu--dropdown{ margin-left: -22px !important; } } " the code for the transparent header ( applies to the header container): "/* ========================================================= Sticky header style swap (Elementor Pro) - Default: transparent + white elements - On scroll: background #f7fbfd, text #1e1e1e, swap logos ========================================================= */ /* Smooth transitions */ selector { transition: background-color .25s ease, box-shadow .25s ease; } /* Default state (top of page) */ selector { background-color: transparent !important; box-shadow: none !important; } /* ===== LOGO SWAP (default = light logo) ===== */ selector .logo-dark { display: none !important; } selector .logo-light { display: block !important; } /* ===== MENU (default state) ===== */ selector .elementor-nav-menu .elementor-item { color: #ffffff !important; } /* Dropdown arrows (default) */ selector .elementor-nav-menu .sub-arrow, selector .elementor-nav-menu .sub-arrow i, selector .elementor-nav-menu .sub-arrow svg { color: #ffffff !important; fill: #ffffff !important; } /* ===== MENU (hover + focus) ===== */ selector .elementor-nav-menu .elementor-item:hover, selector .elementor-nav-menu .elementor-item:focus { color: #93c84e !important; } /* Dropdown arrows on hover/focus */ selector .elementor-nav-menu li:hover > a .sub-arrow, selector .elementor-nav-menu li:focus-within > a .sub-arrow, selector .elementor-nav-menu li:hover > a .sub-arrow i, selector .elementor-nav-menu li:hover > a .sub-arrow svg { color: #93c84e !important; fill: #93c84e !important; } selector .elementor-nav-menu .elementor-item, selector .elementor-nav-menu .sub-arrow, selector .elementor-nav-menu .sub-arrow svg { transition: color 0.25s ease, fill 0.25s ease; } /* Mobile hamburger */ selector .elementor-menu-toggle, selector .elementor-menu-toggle i, selector .elementor-menu-toggle svg { color: #ffffff !important; fill: #ffffff !important; } /* ===== SEARCH (default) ===== */ selector .elementor-search-form__input, selector input[type="search"], selector input[type="text"] { background: rgba(255,255,255,0.10) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.25) !important; } selector .elementor-search-form__input::placeholder, selector input[type="search"]::placeholder, selector input[type="text"]::placeholder { color: rgba(255,255,255,0.75) !important; } /* Search submit */ selector .elementor-search-form__submit, selector button { border: 1px solid rgba(255,255,255,0.25) !important; } selector .elementor-search-form__submit i, selector .elementor-search-form__submit svg { color: #ffffff !important; fill: #ffffff !important; } /* ===== LANGUAGE (default white) ===== */ selector .header-lang, selector .header-lang * { color: #ffffff !important; } selector .header-lang svg, selector .header-lang i { fill: #ffffff !important; color: #ffffff !important; } /* ========================================================= ON SCROLL (Elementor adds this class to the sticky element) ========================================================= */ selector.elementor-sticky--effects { background-color: #f7fbfd !important; box-shadow: 0 8px 30px rgba(0,0,0,.08) !important; } /* Logo swap on scroll */ selector.elementor-sticky--effects .logo-light { display: none !important; } selector.elementor-sticky--effects .logo-dark { display: block !important; } /* ===== MENU (sticky - default) ===== */ selector.elementor-sticky--effects .elementor-nav-menu .elementor-item { color: #1e1e1e !important; } /* Dropdown arrows (sticky - default) */ selector.elementor-sticky--effects .elementor-nav-menu .sub-arrow, selector.elementor-sticky--effects .elementor-nav-menu .sub-arrow i, selector.elementor-sticky--effects .elementor-nav-menu .sub-arrow svg { color: #1e1e1e !important; fill: #1e1e1e !important; } /* ===== MENU (sticky - hover + focus) ===== */ selector.elementor-sticky--effects .elementor-nav-menu .elementor-item:hover, selector.elementor-sticky--effects .elementor-nav-menu .elementor-item:focus { color: #93c84e !important; } /* Dropdown arrows (sticky - hover + focus) */ selector.elementor-sticky--effects .elementor-nav-menu li:hover > a .sub-arrow, selector.elementor-sticky--effects .elementor-nav-menu li:focus-within > a .sub-arrow, selector.elementor-sticky--effects .elementor-nav-menu li:hover > a .sub-arrow i, selector.elementor-sticky--effects .elementor-nav-menu li:hover > a .sub-arrow svg { color: #93c84e !important; fill: #93c84e !important; } selector .elementor-nav-menu .elementor-item, selector .elementor-nav-menu .sub-arrow, selector .elementor-nav-menu .sub-arrow svg { transition: color 0.25s ease, fill 0.25s ease; } /* Hamburger on scroll */ selector.elementor-sticky--effects .elementor-menu-toggle, selector.elementor-sticky--effects .elementor-menu-toggle i, selector.elementor-sticky--effects .elementor-menu-toggle svg { color: #1e1e1e !important; fill: #1e1e1e !important; } /* Search input on scroll */ selector.elementor-sticky--effects .elementor-search-form__input, selector.elementor-sticky--effects input[type="search"], selector.elementor-sticky--effects input[type="text"] { background: #ffffff !important; color: #1e1e1e !important; border: 1px solid rgba(30,30,30,0.25) !important; } /* Placeholder on scroll (your request) */ selector.elementor-sticky--effects .elementor-search-form__input::placeholder, selector.elementor-sticky--effects input[type="search"]::placeholder, selector.elementor-sticky--effects input[type="text"]::placeholder { color: #1e1e1e !important; opacity: 1 !important; } /* Language on scroll */ selector.elementor-sticky--effects .header-lang, selector.elementor-sticky--effects .header-lang * { color: #1e1e1e !important; } selector.elementor-sticky--effects .header-lang svg, selector.elementor-sticky--effects .header-lang i { fill: #1e1e1e !important; color: #1e1e1e !important; }

/* ===== MENU colors (ONLY the header menu widget) ===== */

/* Default (top of page) */
selector .header-nav .elementor-nav-menu .elementor-item{
  color: #ffffff !important;
}

selector .header-nav .elementor-nav-menu .sub-arrow,
selector .header-nav .elementor-nav-menu .sub-arrow i,
selector .header-nav .elementor-nav-menu .sub-arrow svg{
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover/focus (top of page) */
selector .header-nav .elementor-nav-menu .elementor-item:hover,
selector .header-nav .elementor-nav-menu .elementor-item:focus{
  color: #95c94e !important;
}

selector .header-nav .elementor-nav-menu li:hover > a .sub-arrow,
selector .header-nav .elementor-nav-menu li:focus-within > a .sub-arrow,
selector .header-nav .elementor-nav-menu li:hover > a .sub-arrow i,
selector .header-nav .elementor-nav-menu li:hover > a .sub-arrow svg{
  color: #95c94e !important;
  fill: #95c94e !important;
}

/* Sticky (on scroll) */
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .elementor-item{
  color: #1e1e1e !important;
}

selector.elementor-sticky--effects .header-nav .elementor-nav-menu .sub-arrow,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .sub-arrow i,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .sub-arrow svg{
  color: #1e1e1e !important;
  fill: #1e1e1e !important;
}

/* Hover/focus (sticky) */
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .elementor-item:hover,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu .elementor-item:focus{
  color: #95c94e !important;
}

selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:hover > a .sub-arrow,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:focus-within > a .sub-arrow,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:hover > a .sub-arrow i,
selector.elementor-sticky--effects .header-nav .elementor-nav-menu li:hover > a .sub-arrow svg{
  color: #95c94e !important;
  fill: #95c94e !important;
}