.menu-item-nav-search.responsive-nav-search .nv-nav-search { position: fixed; top: 0; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; .search-submit { display: block; } form { position: relative; width: 75%; .nv-search-icon-wrap { position: absolute; top: 0; right: 0; bottom: 0; text-align: center; line-height: 35px; width: 45px; z-index: 3; cursor: pointer; pointer-events: none; color: $muted-white-med; display: flex; align-items: center; justify-content: center; } input[type="search"] { width: 100%; padding: 8px 45px 7px 12px; } input[type="submit"] { top: 0; right: 0; bottom: 0; position: absolute; color: transparent; background: 0 0; z-index: 2; width: 45px; border: 0; padding: 8px 12px 7px; &:hover { background-color: #eee; } } } } .close-container { position: absolute; top: $spacing-lg; display: flex; justify-content: flex-end; } .menu-item-nav-search { cursor: pointer; outline: 0; &:hover .search-icon { opacity: .75; } } .menu-item-nav-search:not(.responsive-nav-search).nv-nav-search { padding: $spacing-xs 0; } .menu-item-nav-search > a { display: block; } .nv-nav-search { visibility: hidden; opacity: 0; transition: $transition_med; position: absolute; right: 0; width: auto; background: #fff; padding: $spacing-xs $spacing-sm; border-top: $muted-border; cursor: default; z-index: 100; @include soft-box-shadow(); .menu-item-nav-search.active & { visibility: visible; opacity: 1; } form { display: block; label { display: inline; margin: 0; input { width: 200px; margin: 0; } } } } a.button.close-responsive-search { @include button(); @include button-secondary(); } .nav-clickaway-overlay { position: fixed; width: 100%; left: 0; right: 0; top: 0; @if ($debug == 'true') { background-color: rebeccapurple; } z-index: 90; height: 100vh; } #nv-primary-navigation .menu-item-nav-search:not(.responsive-nav-search) { display: none; } @mixin nav-search--laptop() { .row #nv-primary-navigation .menu-item-nav-search:not(.responsive-nav-search) { display: block; } }