/* ===== Fixed header-navbar when scrolled ===== Applied when is present Target: #header-navbar (the navigation wrapper in your Twig) */ /* Smooth transition for top/box-shadow change */ #header-navbar { transition: top 180ms ease, box-shadow 180ms ease, background-color 180ms ease; -webkit-transition: top 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } /* When scrolled: make navbar fixed and full-width */ .onscroll #header-navbar { position: fixed; z-index: 1050; /* high enough above content but below admin toolbar if present */ top: 0; /* adjusted by JS if admin toolbar present */ left: 0; right: 0; width: 100%; /* keep same visual background as original area; ensure no transparency issues */ background-color: inherit; /* inherits from parent .site-header colored-area__... */ box-shadow: 0 6px 18px rgba(0,0,0,0.12); } /* Keep the nav container alignment — the inner .container remains centered */ .onscroll #header-navbar .container { max-width: 1200px; /* optional: match your theme container width */ margin-left: auto; margin-right: auto; } /* Ensure the collapsed/expanded mobile navbar doesn't get weird when fixed (only for desktop this applies, but safe to include) */ @media (min-width: 768px) { .onscroll #header-navbar .navbar-collapse { display: block !important; /* respects normal desktop nav state */ } } /* Optional: reduce nav vertical padding slightly when fixed to save space */ .onscroll #header-navbar .navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; } /* If you want the navbar links to remain visible over site background, force a background color matching your original .bg-primary or colored-area. Replace the value below with your theme color if needed. */ .onscroll #header-navbar { background-color: #0d6efd; /* example bootstrap primary — replace if not desired */ } /* Prevent layout shifting for stacked header elements on small screens: disable the fixed behaviour entirely below 768px */ @media (max-width: 767px) { .onscroll #header-navbar { position: static; box-shadow: none; background-color: inherit; } }