.bootstrap-overrides .navbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 3.18rem; padding-left: 0; padding-right: 0; background-color: white; } .bootstrap-overrides .navbar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .bootstrap-overrides .navbar-brand { display: inline-block; width: 135px; height: 51px; font-size: 1.25rem; line-height: inherit; white-space: nowrap; } .bootstrap-overrides .navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; margin-left: auto; list-style: none; } .bootstrap-overrides .navbar-nav .nav-link { padding-right: 0; padding-left: 0; } .bootstrap-overrides .navbar-nav .dropdown-menu { position: static; float: none; } .navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; padding-top: 0.5rem; } .navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; } .navbar-toggler:hover, .navbar-toggler:focus { text-decoration: none; } .navbar-toggler-icon { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; content: ""; background: no-repeat center center; background-size: 100% 100%; } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; } .nav-link { display: block; padding: 0.5rem 1rem; margin-left: 1rem; ; text-align: left; font: Bold 14px/17px Roboto; letter-spacing: 0px; color: #000000; opacity: 1; } .nav-link:hover, .nav-link:focus { text-decoration: none; } .nav-link.disabled { color: #6c757d; pointer-events: none; cursor: default; } .active-nav-link { border-bottom: 4px solid #23BCBA !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0px !important; } .nav-item { margin-bottom: -1px; position: relative; display: inline-block; } .nav-link { width: fit-content; border: 1px solid transparent; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; } /* .nav-link:hover { border-bottom: 4px solid #23BCBA !important; border-left: 0 !important; border-right: 0 !important; border-radius: 0px !important; } */ .nav-link.disabled { color: #6c757d; background-color: transparent; border-color: transparent; } .nav-link.active, .nav-item.show .nav-link { color: #495057; background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } .nav-link { border-radius: 0.25rem; } .nav-link.active, .show>.nav-link { color: #000000; background-color: #23BCBA; } .nav-fill .nav-item { flex: 1 1 auto; text-align: center; } .nav-justified .nav-item { flex-basis: 0; flex-grow: 1; text-align: center; } .navbar-expand { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand>.container, .navbar-expand>.container-fluid, .navbar-expand>.container-sm, .navbar-expand>.container-md, .navbar-expand>.container-lg, .navbar-expand>.container-xl { padding-right: 0; padding-left: 0; } .navbar-expand .navbar-nav { flex-direction: row; } .navbar-expand .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand .navbar-nav .nav-link { padding-right: 1rem; padding-left: 1rem; } .navbar-expand>.container, .navbar-expand>.container-fluid, .navbar-expand>.container-sm, .navbar-expand>.container-md, .navbar-expand>.container-lg, .navbar-expand>.container-xl { flex-wrap: nowrap; } .navbar-expand .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand .navbar-toggler { display: none; } .dropdown-top { width: 0px; border-bottom: 10px solid #23BCBA; border-left: 10px solid transparent; border-right: 10px solid transparent; margin: 0 20%; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; z-index: 2; } .dropdown-options { background-color: #23BCBA; border-radius: 5px; min-width: 160px; width: 214px; overflow: auto; padding: 20px 0px; } .dropdown-content a { text-align: left; font-weight: 700; font-family: 'Roboto', sans-serif; font-size: 0.87rem; color: #FFFFFF; text-transform: uppercase; opacity: 1; padding: 8px 28px; text-decoration: none; display: block; } .dropdown-options a:hover { background-color: rgba(255, 255, 255, 0.609) !important; } .dropdown-options a:hover { background-color: #ddd; } .nav-item:hover .dropdown-content { display: block; } .show { display: block; } @media (max-width: 991.98px) { .navbar-expand-lg>.container { padding-right: 0; padding-left: 0; } #nav.navbar-shrink { padding-top: 1rem; padding-bottom: 1rem; background-color: #212529; } #nav.navbar-shrink .navbar-brand { font-size: 1.25em; } #nav.navbar-shrink .navbar-brand svg { height: 1.5rem; } #nav.navbar-shrink .nav-link, #nav.navbar-shrink button { color: white; } #nav.navbar-shrink .nav-link:hover { color: #23BCBA; } } @media (min-width: 992px) { .navbar-expand-lg { flex-flow: row nowrap; justify-content: flex-start; } .navbar-expand-lg .navbar-nav { flex-direction: row; } .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute; } .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1.2rem; padding-left: 1.2rem; } .navbar-expand-lg>.container { flex-wrap: nowrap; } .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; } .navbar-expand-lg .navbar-toggler { display: none; } } @media (min-width: 992px) { #nav { padding-top: 1.5rem; padding-bottom: 1.5rem; border: none; background-color: transparent; transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; } #nav .navbar-brand { font-size: 1.5em; transition: font-size 0.3s ease-in-out; } #nav .navbar-brand img { /* height: 2rem; */ transition: height 0.3s ease-in-out; } #nav.navbar-shrink { padding-top: 1rem; padding-bottom: 1rem; background-color: #212529; } #nav.navbar-shrink .navbar-brand { font-size: 1.25em; } #nav.navbar-shrink .navbar-brand svg, #mainNav.navbar-shrink .navbar-brand img { height: 1.5rem; } #nav.navbar-shrink .nav-link, #nav.navbar-shrink button { color: white; } #nav.navbar-shrink .nav-link:hover { color: #23BCBA; } #nav .navbar-nav .nav-item { margin-right: 1rem; } #nav .navbar-nav .nav-item:last-child { margin-right: 0; } }