PATH:
home
/
rwabteecom
/
public_html_olld
/
resources
/
assets
/
scss
/
front
/
Editing: layout.scss
@import "../front/variables.scss"; .header { // position: fixed; position: absolute; width: 100%; left: 0; right: 0; top: 0; margin: auto; padding-top: 20px; padding-bottom: 20px; transition: all .5s ease-in-out; z-index: 1; @media (max-width: 991px) { padding-top: 15px; padding-bottom: 15px; } // &.fixed { // background-color: $white; // box-shadow: 0px 3px 10px 0px rgb(38 107 193 / 8%); // } .navbar-logo { width: auto; height: 60px; max-height: 60px; @media (max-width: 1000px){ height: 50px; max-height: 50px; } @media (max-width: 750px){ height: 45px; max-height: 45px; } @media (max-width: 425px){ height: 40px; max-height: 40px; } } .dropdown { .dropdown-menu { li { .nav-link { color: $black !important; img { width: 18px; height: 18px; } } } } .dropdown-toggle { color: $white; font-size: 1rem; padding: 0.5rem 0; box-shadow: none; &:after { border: 0; margin-left: 10px; font-family: "Font Awesome 6 Free"; font-weight: 900; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); content: "\f107"; vertical-align: middle; } } .dropdown-item { // color: $gray-100; padding: 8px 25px; &:hover, &:focus { // color: $primary; background-color: transparent; } } } } .navbar { @media (max-width: 991px) { position: static; padding: 0; } .navbar-nav { .nav-link { color: $white; } } .navbar-toggler { @media (max-width: 991px) { box-shadow: none; } } .navbar-collapse { @media (max-width: 991px) { position: absolute; width: 100%; top: calc(100% - 10px); background: $blue; left: 0px; right: 0px; margin: auto; max-width: 720px; border-radius: $border-radius; box-shadow: 0px 0px 20px rgb(173 181 189 / 10%); } @media (max-width: 767px) and (min-width: 576px) { max-width: 516px; } @media (max-width: 575px) { width: calc(100% - 24px); } .navbar-nav { @media (max-width: 991px) { padding: 10px; } .nav-item { .nav-link { color: $white; } } } } } .navbar-toggler { padding: 0; height: 26px; width: 26px; position: relative; margin: auto; cursor: pointer; border: none; .navbar-toggler-icon { position: absolute; height: 2px; background-color: $white; width: 26px; display: block; border-radius: 2px; transition: 0.35s ease all; background-image: none !important; } .top-bar { top: 0px; } .middle-bar { top: 7px; opacity: 1; } .bottom-bar { top: 14px; } &.open { .top-bar { top: 7px; transform: rotate(225deg); } .middle-bar { opacity: 0; width: 0%; transform-origin: left center; transition: 0.175s ease all } .bottom-bar { top: 7px; transform: rotate(-225deg); } } } // #toogler-icon .navbar-toggler.open .top-bar { // top:7px; // transform:rotate(225deg); // } // #toogler-icon.navbar-toggler.open .middle-bar { // opacity:0; // width:0%; // transform-origin: left center; // transition: 0.175s ease all // } // #toogler-icon.navbar-toggler.open .bottom-bar { // top:7px; // transform:rotate(-225deg); // }
SAVE
CANCEL