/* mobile-navbar-fix-v6.css Cel: znikający pasek + pełne menu bez "cienkiego paska" na wszystkich mobilnych przeglądarkach. Technika: - Gdy menu otwarte -> na dodajemy .menu-open, co wyłącza transform paska i pozwala panelowi działać jako pełny, niezależny layer. - Panel ma pozycję fixed względem okna (nie rodzica), z wysokim z-index i bez ograniczeń. */ :root { --navbar-height: 70px; } /* zostanie nadpisane skryptem */ @media (max-width: 767px) { /* Panel menu jako niezależny layer */ .navbar-collapse { position: fixed !important; top: var(--navbar-height, 70px); left: 0; right: 0; bottom: 0; width: 100vw; max-height: none !important; height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 2000; /* ponad nagłówkiem i innymi warstwami */ /* Dopasowane do paska: */ background: #c5c6c6; border-top: 1px solid #b5b6b6; /* Wewnętrzne odstępy + bezpieczne strefy */ padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0)); padding-left: calc(16px + env(safe-area-inset-left, 0)); padding-right: calc(16px + env(safe-area-inset-right, 0)); /* Na wszelki wypadek wymuś widoczność */ visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Podczas animacji BT3 'collapsing' też zachowaj auto-height */ .navbar-collapse.collapsing { height: auto !important; overflow: hidden; } /* Zadbaj, by żaden rodzic nie ucinał panelu */ .navbar, .templatemo-nav { overflow: visible !important; } /* Linki w menu */ .navbar-default .navbar-nav > li > a { color: #202020 !important; display: block; padding: 12px 16px !important; line-height: 24px !important; border-radius: 8px; margin: 4px 6px; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background: #bdbebe; text-decoration: none; color: #202020 !important; } .navbar-default .navbar-nav > li > a.current { color: #25973e !important; background: rgba(37,151,62,0.12); } .navbar-default .navbar-nav > li:last-child > a { margin-bottom: 10px; } .navbar-toggle { z-index: 2100; } } /* Kiedy menu otwarte — globalny tryb: wyłącz transform na pasku i przodkach */ body.menu-open .navbar, body.menu-open .templatemo-nav, body.menu-open .navbar-default { transform: none !important; will-change: auto !important; } /* Delikatny cień gdy pasek widoczny */ .navbar:not(.navbar--hidden) { box-shadow: 0 2px 10px rgba(0,0,0,.08); } /* Toggle na jasnym tle */ .navbar-default .navbar-toggle { border-color: #202020; } .navbar-default .navbar-toggle .icon-bar { background-color: #202020; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: #bdbebe; }