website/sass/widgets/menu.scss

41 lines
1.4 KiB
SCSS

/************************************************************
*************************************************************
******************* SQUAT THEME *********************
********** Javascript-free attempt at a better web **********
*************************************************************
************************************************************/
/* Menu widget styles */
.widget-menu {
width: 100%; white-space: nowrap; box-sizing: border-box;
ul {
list-style: none; margin: 0; padding: 0;
display: inline-block;
@media screen and (max-width: 62em) { display: none; }
li { display: inline-block; padding: 0; margin: 0; position: relative; }
}
}
#menu-nav-main { text-align: center; font-size: 1.2rem; }
.pure-menu-link, .pure-menu-open { display: block; padding: 0.5em 1em; }
#menu-nav-main .pure-menu-children { left: 50% !important; transform: translateX(-50%); }
.pure-menu-open {
display: none;
@media screen and (max-width: 62em) {
display: block;
&:target {
display: none;
& ~ .pure-menu-close { display: inline-block; }
& ~ ul {
display: block;
li { display: block; position: relative; }
}
}
}
}
/* Making pureCSS menu responsive without Javascript */
.pure-menu-close { display: none; }