@media screen { .hide-content { display: block; width: 0px; height:0px; margin: 0; padding:0; overflow:hidden; } .custom-logo { min-width: 11rem; margin: 1rem; } .main-navigation,.secondary-navigation { ul { display: none; list-style: none; margin: 0; padding-left: 0; ul.sub-menu { padding-top: 0.5rem; padding-left: 1rem; } } li { position: relative; &:hover > a, &.focus > a { } } a { display: flex; align-items: center; min-height: 100%; text-decoration: none; font-size: 1rem; } } .main-navigation { &.toggled { ul { display: block; } .main-navigation-content { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; padding: 4rem; background-color: rgba(255,255,255,0.95); overflow: auto; } .menu-toggle { position: relative; z-index: 9999; } .current-menu-ancestor > a::after { background-color: transparent; } .current-menu-item > a::after { display: inline-block; content: ""; position: absolute; left: 0; top: 2em; height: 2px; width: 100%; background-color: $color__black; } } } .secondary-navigation { padding: 0 1em 1em 0; ul { display: inline-block; li { padding: 0.5em 0; } } a { text-transform: uppercase; } } .menu-item-has-children { } /* begin of menu-hidden */ .toggle-secondary-navigation .show-mobile{ display:inherit; } .toggle, .toggled-menu { display: none; } .toggle:checked+.toggled-menu{ display: block; position: absolute; left:0; top:0; width: 100%; height: 100vh; margin-top: 0; padding: 0 2rem; } .toggle-show { position: relative; display: inline-block; width: 1.8em; height: 1.4em; margin-right: 0.3em; border-top: 0.3em solid $color__black; border-bottom: 0.3em solid $color__black; } .toggle-show::before { content: ""; position: absolute; top: 0.3em; left: 0; width: 100%; border-top: 0.3em solid $color__black; } .toggle-hide { display: flex; justify-content: end; margin-right: -0.5em; } .toggle-hide::after{ content: "x"; padding: 0; font-size: 3rem; font-weight: bold; } /* end of menu hidden*/ } @media screen and (max-width: 47.99em) { .site-branding { } .main-navigation-content { li { padding: 0.5rem 0; } } .secondary-navigation-content { padding: 4rem 2rem; } } @media screen and (min-width: 48em) { .site-branding { } .custom-logo { min-width: 11rem; margin: 1rem 1rem 1rem 0; } .menu-toggle { display: none; } .main-navigation,.secondary-navigation { ul { display: flex; .menu-item-has-children > ul { background-color: rgba(255,255,255,0.95); } .sub-menu { float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; ul { left: -999em; top: 0; } li { &:hover > ul, &.focus > ul { display: block; left: 4em; top: 1em; } } a { width: 200px; } :hover > a, .focus > a { } a:hover, a.focus { } } li { padding: 0 1em; &:hover > ul, &.focus > ul { left: auto; } } } } .main-navigation { padding-bottom: 1em; ul { justify-content: end; ul.sub-menu { flex-direction: column; padding: 0.5rem; li { margin: 0.5rem 0; } } } .current-menu-ancestor > a::after, .current-menu-item > a::after { display: inline-block; content: ""; position: absolute; left: 1em; bottom: -0.5em; min-height: 2px; height: 2px; width: calc(100% - 2em); background-color: $color__black; } .menu-item-has-children { ul { } } } .secondary-navigation { padding: 1.5em 0; } .menu-item-has-children { padding-right: 0.5em; &::after { content: ""; display: inline-block; position: absolute; top: 40%; right: 0.3em; width: 0.3em; height: 0.3em; border: 1px solid $color__black; border-top: none; border-left: none; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } &:hover { &::after { //border-color: $color__grey-dark; } } } /* * css menu toggler * */ .toggle-secondary-navigation .show-mobile, .toggle-secondary-navigation .hide-not-mobile{ display: none; } .toggled-menu { display: inherit; } /* end css menu toggler * */ } .comment-navigation, .posts-navigation, .post-navigation { .site-main & { margin: 0 0 1.5em; align-self: end; } .nav-links { display: flex; } .nav-previous { flex: 1 0 50%; } .nav-next { //text-align: end; flex: 1 0 50%; } } @media screen and (min-width: 80em) { .main-navigation,.secondary-navigation { .toggle-sidebar-segona .show-mobile, .toggle-sidebar-segona .hide-not-mobile{ display:none; } //a { // padding: 0 1rem; //} } .main-navigation { padding-bottom: 0; } }