/* ========================================================== Elgar Responsive Navigation Version: 1.1 (Centered toggle + compact header) Scope: (Asset Injector) ========================================================== */ /* --- Base Navigation Container --- */ #navigation { background: #183c64;/* Elgar blue #1e63b0;*/ transition: all 0.3s ease; width: 100%; z-index: 50; } /* --- Default compact height when closed --- */ #navigation:not(.active) .container { min-height: 52px !important; padding: 0.25rem 1rem !important; } /* --- Expanded height when active (menu open) --- */ #navigation.active .container { padding-bottom: 0.5rem !important; } /* --- Flex layout alignment --- */ #navigation .container { display: flex !important; /* align-items: center !important; */ justify-content: space-between !important; flex-wrap: wrap !important; gap: 0.5rem !important; box-sizing: border-box; } /* --- Primary and secondary menu regions --- */ #navigation .region-primary-menu, #navigation .region-secondary-menu { display: block !important; flex: 1 1 auto !important; } /* --- Menu list (desktop) --- */ #navigation .menu { display: flex !important; gap: 1.5rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; align-items: center !important; } /* --- Menu links --- */ #navigation .menu a { color: #fff !important; text-decoration: none !important; padding: 0.25rem 0.25rem !important; font-weight: 600 !important; transition: opacity 0.2s ease; } #navigation .menu a:hover { opacity: 0.8; } /* --- Active menu link highlight --- */ #navigation .menu a.is-active, #navigation .menu a[aria-current="page"] { text-decoration: underline !important; } /* --- Toggle Button --- */ #nav-toggle { display: none; background: #3b3b3b; color: #fff; border: 2px solid #fff; border-radius: 6px; padding: 0.45rem 0.7rem; /* balanced vertical space */ font-size: 1.3rem; line-height: 1; cursor: pointer; /* align-self: center !important;*/ position: relative; top: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) inset; transition: background 0.2s ease, transform 0.2s ease; } #nav-toggle:hover { background: #2a2a2a; transform: scale(1.05); } /* ========================================================== Responsive Behaviour (Mobile) ========================================================== */ @media (max-width: 900px) { /* Show toggle button */ #nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; } /* Stack and hide menus by default */ #navigation .menu { flex-direction: column !important; background: #0f345d !important; /* #1e63b0*/ display: none !important; width: 100% !important; margin-top: 0.3rem !important; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } /* Show menus when active */ #navigation.active .menu { display: flex !important; max-height: 2000px; } /* Menu items stacked vertically */ #navigation .menu li { width: 100% !important; border-top: 1px solid rgba(255, 255, 255, 0.08); } #navigation .menu a { display: block !important; padding: 0.7rem 1rem !important; width: 100%; } /* Ensure nav bar stays compact when collapsed */ #navigation:not(.active) .menu { max-height: 0; overflow: hidden; } /* Hide secondary menu until toggled */ #navigation .region-secondary-menu { order: 3; } } /* ========================================================== Optional small visual niceties ========================================================== */ #navigation .menu .menu-item:last-child { margin-right: 0 !important; } #navigation .menu li { list-style-type: none; }