header {
grid-template-columns: 200px auto 1.5rem;
padding-top: 1em;
padding-bottom: 1em;
& figure{
margin: 0;
}
& .search-desktop {
display: block;
}
& .main-menu-container {
display: block;
& li[class*="-color"]>a {
color: inherit;
}
& a {
cursor: pointer;
text-wrap: nowrap; } &>ul {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
font-size: var(--wp--preset--font-size--small);
&>li {
position: relative;
border: 2px solid var(--wp--preset--color--wit);
&:hover {
border: 2px solid var(--wp--preset--color--zwart);
}
&:is(.current-menu-ancestor, .current-menu-item) {
border: 2px solid var(--wp--preset--color--zwart);
}
&>a {
text-decoration: none;
display: inline-block;
padding: 1em max(1vw, 1em);
font-weight: 600;
}
&:hover ul {
display: grid;
}
&:has(a:focus) ul {
display: grid;
}
} & ul {
display: none;
gap: 1em;
position: absolute;
background: #fdfdfd;
list-style: none;
padding: 1em max(1vw, 1em);
min-width: 10vw;
z-index: 10001;
left: 0;
margin-top: 2px;
border-bottom: 5px solid;
&>li:is(.current-menu-ancestor, .current-menu-item)>a {
font-weight: 600;
color: var(--wp--preset--color--groen);
}
}
}
}
& #openmenu {
display: none;
}
}
body.stuck header { }
body.open-mobile-menu {
filter: invert(0);
& header .main-menu-container {
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
overflow: visible;
height: auto;
padding-bottom: 0;
margin-top: 0;
width: auto;
&>ul>li {
padding: 0;
}
}
header #search {
opacity: 1;
}
}
svg{
& .rotate-on-hover {
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
-webkit-transform-origin: 15.88px 15.51px;
transform-origin: 15.88px 15.51px;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
&:hover .rotate-on-hover {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
} footer {
display: grid;
grid-template-columns: 50% auto;
text-align: left;
align-items: center;
& img {
width: 100%;
}
& ul {
flex-direction: column;
gap: 0;
}
}