website/public/assets/css/snippets/HTMLNavMenuElement.css

61 lines
No EOL
905 B
CSS

nav-menu {
display: none;
}
@media (max-width: 950px) {
/* # Overrides */
body.menu-open {
overflow: hidden;
}
/* ## Header */
body.menu-open header {
background-color: var(--color-accent);
}
body.menu-open header nav p {
color: white;
}
/* # Nav menu */
nav-menu {
top: var(--running-size);
left: 0;
width: 100%;
overflow-y: scroll;
height: calc(100svh - var(--running-size));
display: none;
position: fixed;
align-items: center;
flex-direction: column;
background-color: white;
}
nav-menu.active {
display: flex;
}
/* ## Sections */
nav-menu nav {
gap: calc(var(--padding) / 2);
width: 100%;
max-width: 600px;
display: flex;
padding: var(--padding);
flex-direction: column;
}
nav-menu nav:last-child {
margin-top: auto;
}
nav-menu nav.horizontal {
gap: var(--padding);
flex-direction: row;
justify-content: center;
}
}