femmefaytale/cotech-website
0
0
Fork 0
forked from autonomic-cooperative/cotech-website
Code Issues Pull Requests Projects Releases Wiki Activity

Implement burger menu

Browse Source 
Rather than attempt to recreate the exact burger menu from the old
version of the site, since it requires a number of dependencies, I've
added a burger menu with some inline javascript to handle the toggle
states.

I used Claude 4 to help generate the CSS here.
This commit is contained in:
Chris Lowis
2025-06-25 21:52:48 +01:00
parent b9d79dd8f8
commit 877836953a
2 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
assets/css/app.css
View File

@ -126,6 +126,63 @@ section.content h2 {
letter-spacing: 0.05em;
}
.header_burger-btn {
display: none;
background: none;
border: none;
cursor: pointer;
padding: var(--space-xs);
color: var(--cotech-dark-grey);
}
.header_close-icon {
display: none;
}
@media screen and (width < 480px) {
.header {
position: relative;
}
.header_burger-btn {
display: block;
}
.header_menu-list {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: var(--cotech-white);
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-lg);
font-size: 1.5rem;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.2s ease;
}
.header_menu-list.active {
transform: translateX(0);
}
.header_burger-btn.active .header_burger-icon {
display: none;
}
.header_burger-btn.active .header_close-icon {
display: block;
}
.header_burger-btn {
position: relative;
z-index: 1001;
}
}
.hero {
width: 100%;
padding: var(--space-lg) var(--space-sm);