@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 { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); float: left; position: absolute; top: 100%; left: -999em; z-index: 99999; ul { left: -999em; top: 0; } li { &:hover > ul, &.focus > ul { display: block; left: auto; } } a { width: 200px; } :hover > a, .focus > a { } a:hover, a.focus { } } li:hover > ul, li.focus > ul { left: auto; } } li { position: relative; &:hover > a, &.focus > a { } } a { display: flex; align-items: center; min-height: 100%; padding: 0 0.5rem; text-decoration: none; font-size: 1rem; } .current_page_item > a, .current-menu-item > a, .current_page_ancestor > a, .current-menu-ancestor > a { font-weight: bold; border-left: 1px solid $color__black; } } .main-navigation { } .secondary-navigation { padding: 1.5rem 0; ul { display: inherit; } a { text-transform: uppercase; } } /* begin of menu-hidden */ .toogle-secondary-navigation .show-mobile{ display:inherit; } .toogle, .toogled-menu { display: none; } .toogle:checked+.toogled-menu{ display: block; position: absolute; left:0; top:0; width: 100%; height: 100%; margin-top: 0; padding-top: 3em; background-color: rgba(250,250,250,0.9); } .toogle-show { position: relative; display: inline-block; width: 1.8em; height: 1.4em; margin-right: 0.3em; border-top: 0.3em solid #000; border-bottom: 0.3em solid #000; } .toogle-show::before { content: ""; position: absolute; top: 0.3em; left: 0; width: 100%; border-top: 0.3em solid #000; } .toogle-hide::after{ content: "x"; display: block; position:absolute; top:0; left:50%; width: 1.8em; height: 1.4em; //margin-top: -1.4em; padding: 0.2em; font-size: 2rem; font-weight: bold; background-color: $color__white; color: $color__black; } /* end of menu hidden*/ /* Small menu. */ .menu-toggle, .main-navigation.toggled ul { display: block; } } @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; } a { padding: 0 0.5rem; } .current_page_item > a, .current-menu-item > a, .current_page_ancestor > a, .current-menu-ancestor > a { border-left: none; } } .main-navigation { padding-bottom: 1em; ul { justify-content: end; } .current-menu-item::after { display: block; content: ""; width: 60%; margin:0 20%; margin-top: 0.9em; border-bottom: 2px solid $color__black; } } .secondary-navigation { } } .comment-navigation, .posts-navigation, .post-navigation { .site-main & { margin: 0 0 1.5em; } .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 { .toogle-sidebar-segona .show-mobile, .toogle-sidebar-segona .hide-not-mobile{ display:none; } a { padding: 0 1rem; } } .main-navigation { padding-bottom: 0; .current-menu-item::after { margin-top: 0.4em; height: 100%; } } }