/** * Main header */ .main-header { z-index: 3000; position: absolute; top: 0; left: 0; height: 76px; /* sync with map-container positioning */ width: 100%; min-width: 320px; /* to avoid logo line wrap*/ text-decoration: none; } @media (min-width: 990px){ .main-header { width: 470px; } .nav-header { border-right: 1px solid #000; } } .main-header.navbar { padding: 0; } .nav-header { z-index: 1; display: flex; justify-content: space-between; width: 100%; padding: 12px; background: #fff; } .nav-header a { padding: 0; margin: 0; } .navbar .navbar-toggler { padding: .5rem .75rem .5rem .75rem; } .navbar .navbar-toggler-icon { width: 1em; height: 1em; } .navbar .close { display: inline-block; vertical-align: middle; height: 1em; padding: 0 3px; } .main-header .navbar-collapse { height: calc(100vh - 76px); display: block; overflow-y: auto; transition: transform 0.3s; transform: translateY(0); background: #fff; } @media (min-width: 990px){ .navbar-collapse { border-right: 1px solid #000; } } .main-header .navbar-collapse > ul:last-child { padding-bottom: 5rem; } .navbar-collapse.collapse { transform: translateY(-100vh); } .navbar-collapse { padding: .5rem 1rem; } .link-note { margin-left: 1em; display: inline-block; text-transform: uppercase; font-size: 70%; font-weight: bold; color: #777; }