autonomic-cooperative/cotech-website
3
0
Fork 2
mirror of https://git.coop/cotech/website.git synced 2025-10-06 17:14:35 +00:00
Code Issues 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);