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

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

@ -12,33 +12,20 @@
margin: 1rem;
}
.main-navigation,.secondary-navigation {
ul {
.main-navigation-content {
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 {
&.toggled {
ul {
display: block;
position: relative;
}
.menu-toggle {
position: relative;
z-index: 999;
}
.main-navigation-content {
display: inline-block;
position: absolute;
@ -50,9 +37,13 @@
background-color: rgba(255,255,255,0.95);
overflow: auto;
}
.menu-toggle {
position: relative;
z-index: 9999;
li {
display: block;
}
a {
display: block;
min-height: 100%;
padding: 0.5em 0;
}
.current-menu-ancestor > a::after {
background-color: transparent;
@ -70,66 +61,56 @@
}
}
.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;
}
//.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*/
}
@ -138,11 +119,9 @@
}
.main-navigation-content {
li {
padding: 0.5rem 0;
}
}
.secondary-navigation-content {
padding: 4rem 2rem;
}
}
@media screen and (min-width: 48em) {
@ -157,6 +136,9 @@
}
.main-navigation,.secondary-navigation {
.main-navigation-content {
display: inline-block;
}
ul {
display: flex;
flex-flow: row;
@ -165,14 +147,13 @@
box-shadow: -4px 4px 15px #999;
border-radius: 0.2em;
}
.sub-menu {
ul.sub-menu {
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
padding-top: 0.5rem;
padding-left: 1rem;
padding: 0.5rem;
ul {
left: -999em;
@ -194,6 +175,7 @@
}
}
li {
position: relative;
padding: 1em;
&:hover > ul,
&.focus > ul {
@ -202,6 +184,14 @@
&.lang-item {
}
}
a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
}
}
}
@ -211,9 +201,7 @@
justify-content: end;
ul.sub-menu {
flex-direction: column;
//padding: 0.5rem;
li {
//padding: 0.5rem;
}
}
}