xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styled menu for small screens

This commit is contained in:
jorge 2024-03-14 20:30:26 +01:00
parent 5b1262e01b
commit 590d0fbe7b
1 changed files with 73 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
sass/components/navigation/_navigation.scss
View File

@ -12,33 +12,20 @@
margin: 1rem; margin: 1rem;
} }
.main-navigation,.secondary-navigation { .main-navigation,.secondary-navigation {
ul { .main-navigation-content {
display: none; display: none;
list-style: none;
margin: 0;
padding-left: 0;
ul.sub-menu {
padding-top: 0.5rem;
padding-left: 1rem;
}
}
li {
position: relative;
}
a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
} }
} }
.main-navigation { .main-navigation {
&.toggled { &.toggled {
ul { ul {
display: block; display: block;
position: relative;
} }
.menu-toggle {
position: relative;
z-index: 999;
}
.main-navigation-content { .main-navigation-content {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
@ -50,10 +37,14 @@
background-color: rgba(255,255,255,0.95); background-color: rgba(255,255,255,0.95);
overflow: auto; overflow: auto;
} }
.menu-toggle { li {
position: relative; display: block;
z-index: 9999; }
} a {
display: block;
min-height: 100%;
padding: 0.5em 0;
}
.current-menu-ancestor > a::after { .current-menu-ancestor > a::after {
background-color: transparent; background-color: transparent;
} }
@ -70,66 +61,56 @@
} }
} }
.secondary-navigation { .secondary-navigation {
padding: 0 1em 1em 0;
ul {
display: inline-block;
li {
padding: 0.5em 0;
}
}
a {
text-transform: uppercase;
}
} }
.menu-item-has-children { .menu-item-has-children {
} }
/* begin of menu-hidden */ /* begin of menu-hidden */
.toggle-secondary-navigation .show-mobile{ //.toggle-secondary-navigation .show-mobile{
display:inherit; // display:inherit;
} //}
.toggle, //.toggle,
.toggled-menu { //.toggled-menu {
display: none; // display: none;
} //}
.toggle:checked+.toggled-menu{ //.toggle:checked+.toggled-menu{
display: block; // display: block;
position: absolute; // position: absolute;
left:0; // left:0;
top:0; // top:0;
width: 100%; // width: 100%;
height: 100vh; // height: 100vh;
margin-top: 0; // margin-top: 0;
padding: 0 2rem; // padding: 0 2rem;
} //}
.toggle-show { //.toggle-show {
position: relative; // position: relative;
display: inline-block; // display: inline-block;
width: 1.8em; // width: 1.8em;
height: 1.4em; // height: 1.4em;
margin-right: 0.3em; // margin-right: 0.3em;
border-top: 0.3em solid $color__black; // border-top: 0.3em solid $color__black;
border-bottom: 0.3em solid $color__black; // border-bottom: 0.3em solid $color__black;
} //}
.toggle-show::before { //.toggle-show::before {
content: ""; // content: "";
position: absolute; // position: absolute;
top: 0.3em; // top: 0.3em;
left: 0; // left: 0;
width: 100%; // width: 100%;
border-top: 0.3em solid $color__black; // border-top: 0.3em solid $color__black;
} //}
.toggle-hide { //.toggle-hide {
display: flex; // display: flex;
justify-content: end; // justify-content: end;
margin-right: -0.5em; // margin-right: -0.5em;
} //}
.toggle-hide::after{ //.toggle-hide::after{
content: "x"; // content: "x";
padding: 0; // padding: 0;
font-size: 3rem; // font-size: 3rem;
font-weight: bold; // font-weight: bold;
} //}
/* end of menu hidden*/ /* end of menu hidden*/
} }
@ -138,11 +119,9 @@
} }
.main-navigation-content { .main-navigation-content {
li { li {
padding: 0.5rem 0;
} }
} }
.secondary-navigation-content { .secondary-navigation-content {
padding: 4rem 2rem;
} }
} }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
@ -157,6 +136,9 @@
} }
.main-navigation,.secondary-navigation { .main-navigation,.secondary-navigation {
.main-navigation-content {
display: inline-block;
}
ul { ul {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
@ -165,14 +147,13 @@
box-shadow: -4px 4px 15px #999; box-shadow: -4px 4px 15px #999;
border-radius: 0.2em; border-radius: 0.2em;
} }
.sub-menu { ul.sub-menu {
float: left; float: left;
position: absolute; position: absolute;
top: 100%; top: 100%;
left: -999em; left: -999em;
z-index: 99999; z-index: 99999;
padding-top: 0.5rem; padding: 0.5rem;
padding-left: 1rem;
ul { ul {
left: -999em; left: -999em;
@ -194,6 +175,7 @@
} }
} }
li { li {
position: relative;
padding: 1em; padding: 1em;
&:hover > ul, &:hover > ul,
&.focus > ul { &.focus > ul {
@ -202,6 +184,14 @@
&.lang-item { &.lang-item {
} }
} }
a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
}
} }
} }
@ -211,9 +201,7 @@
justify-content: end; justify-content: end;
ul.sub-menu { ul.sub-menu {
flex-direction: column; flex-direction: column;
//padding: 0.5rem;
li { li {
//padding: 0.5rem;
} }
} }
} }