// https://codepen.io/Nikitoss334/details/KLxaJK // FIXME clarify license @use "../node_modules/bulma/sass/utilities/mixins"; @use "./_teckids.scss"; .navbar-toggle { display: none; } .navbar .navbar-toggle:checked { &+.navbar-brand .navbar-burger { & span:nth-child(1) { -webkit-transform: rotate(45deg); transform: translateY(0px) rotate(45deg); } & span:nth-child(2) { opacity: 0; } & span:nth-child(3) { opacity: 0; } & span:nth-child(4) { -webkit-transform: rotate(-45deg); transform: translateY(-6px) rotate(-45deg); } } &~.navbar-menu { @media screen and (max-width: 1024px) { display: block; } } } .navbar-item.is-mega { position: static; .is-mega-menu-title { margin-bottom: 0; padding: .375rem 1rem; } .is-mega-menu-subtitle { padding: .375rem 1rem; } } .navbar-dropdown { overflow: hidden; } #main-navbar { background-color: teckids.$orange; // adapted from the --bulma-shadow css variable box-shadow: 0 .5em 1em -.125em hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.3), 0 0 0 1px hsla(var(--bulma-shadow-h), var(--bulma-shadow-s), var(--bulma-shadow-l), 0.05); } #main-navbar .navbar-brand > a { color: white; font-weight: bold; } @include mixins.desktop { #main-menu > div > .navbar-item > a, #main-menu > div > a.navbar-item { color: white; font-weight: bold; } #main-menu > div > .navbar-item > a:hover, #main-menu > div > a.navbar-item:hover { color: teckids.$orange; } } // FIXME: https://github.com/jgthms/bulma/issues/3757 .navbar-burger { color: white !important; }