mainNav {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-toggler-icon {
display: inline-block; width: 1.5em; height: 1.5em; content: "Menu"; vertical-align: middle; background: no-repeat 50%; background-size: 100% 100%
}
.navbar-brand h2{
color: #fff;
}
// .nav-item a { // text-transform: uppercase; // }
.fixed-top {
position: fixed; z-index: 1030; right: 0; left: 0;
}
.navbar {
position: relative; padding: 1.25rem 1rem; transition: background-color .5s ease-in-out 0.05s, padding .75s ease-in-out; .nav-item-divider { display: none; .nav-link > span { border-left: 1px solid } .nav-link { opacity: .25 } }
}
/////////////// Both ///////////////
.navbar-nav {
.nav-link { padding-right: 1rem; padding-left: 1rem } .nav-item { padding: 0 0.75rem; } .active > .nav-link, .nav-link.active, .nav-link.show, .show > .nav-link{ color: #007bff!important; }
}
/////////////// Dark ///////////////
.navbar-dark {
color: #fff; background-color: transparent; .navbar-nav { .nav-link { color: $white; } }
}
/////////////// Light ///////////////
.navbar-light {
background-color: #fff; color: #212529; box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.03) !important; .navbar-brand h2{ color: #111; } .navbar-nav { .nav-link , .nav-link:hover, .nav-link:focus{ color: $black; } }
}
.navbar-light::before {
opacity: 1;
}
/////////////// Media ///////////////
@media (min-width:1200px) {
.navbar .nav-item-divider { display: block }
}
@media (max-width:1199.98px) {
.navbar .dropdown-menu { padding-top: 0; padding-bottom: 0; border: 0 }
}
@media (min-width:1200px) {
.navbar .dropdown-menu { transform: translateY(.5rem); opacity: 0 } .navbar .dropdown-menu.show { animation: .2s forwards d } @keyframes d { to { transform: translateY(0); opacity: 1 } }
}
/* ================================================== Responsive styles
*/¶ ↑
@media (min-width : map_get($grid-breakpoints, lg)) { }
@media (min-width : map_get($grid-breakpoints, md)) and (max-width: map_get($grid-breakpoints, lg)) {
.navbar-light .navbar-toggler{ color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.1); padding: 10px 10px; border-radius: 0px; } .navbar-nav{ background: #000; } .navbar-light .navbar-nav{ background: #fff; } .navbar-light .navbar-toggler-icon-bar{ background: #fff; height: auto; }
}
@media (min-width : map_get($grid-breakpoints, sm)) and (max-width: map_get($grid-breakpoints, md)) {
.navbar-light .navbar-toggler { color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.1); padding: 10px 10px; border-radius: 0px; } .navbar-nav{ background: #000; } .navbar-light .navbar-nav{ background: #fff; } .navbar-light .navbar-toggler-icon-bar{ background: #fff; height: auto; }
}
@media (min-width : map_get($grid-breakpoints, xs)) and (max-width: map_get($grid-breakpoints, sm)) {
.navbar-light .navbar-toggler { color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.1); padding: 10px 10px; border-radius: 0px; } .navbar-nav{ background: #000; } .navbar-light .navbar-nav{ background: #fff; } .navbar-light .navbar-toggler-icon-bar{ background: #fff; height: auto; }
}