.nav { // display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .navbar { padding: 0px; background: radial-gradient(farthest-corner at 50% 85%, $suwa06 0%, $black1 100%); border: 2px solid $suwa03; box-shadow: 0 0 7px 3px $suwa04; position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar-brand, .nav-item { transition: background 0.3s; border-radius: 2px; cursor: pointer; padding-left: 5px; padding: .2rem .1rem; } .navbar-brand:hover, .nav-item:hover { background-color: $suwa07; text-decoration: none; } .sidemenu { border: 2px solid $suwa03; box-shadow: 0 0 7px 3px $suwa04; } .nav-pills .nav-link { border-radius: 0px; font-size: 14px; } .dropdown { position: relative; } .mr-auto { margin-right: auto !important; } .ml-auto { margin-left: auto !important; } .fixed-top, .fixed-bottom { position: fixed; right: 0; left: 0; z-index: 1030; } .fixed-top { top: 0; } .fixed-bottom { bottom: 0; } .nav-link { display: block; } @media (min-width: 576px) { .nav-link { padding: 0.5rem 1rem; } } .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: $white1; background-color: $suwa03; } .navbar .container, .navbar .container-fluid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .navbar-nav { display: flex; color: $white1; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; font-size: 14px; } .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .navbar-nav .dropdown-menu { position: static; float: none; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; } .navbar-expand { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand .navbar-nav { flex-direction: row; } .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand .navbar-nav .nav-link { padding-right: 0.5rem; padding-left: 0.5rem; } .navbar-expand > .container, .navbar-expand > .container-fluid { flex-wrap: nowrap; } .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; }