lee/hpr_generator
1
0
Fork 0
forked from HPR/hpr_generator
Code Pull Requests Activity

Added hamburger menu for narrow devices

Browse Source
This commit is contained in:
Lee Hanken
2025-08-08 16:06:08 +01:00
parent 3991c95533
commit a29585dd82
5 changed files with 105 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
public_html/css/hpr.css
View File

@@ -91,7 +91,7 @@ body > nav ul {
margin: 0;
padding: 0.25rem;
}
body > nav ul li {
body > nav ul li {
display: inline-block;
background-color: inherit;
color: inherit;
@@ -513,3 +513,73 @@ fieldset > input {
flex: 1;
}
}
@media (max-width: 480px) {
#main_menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
z-index: 1000;
}
.hamburger {
display: block ! important;
}
#main_menu.is_open {
display: block;
position: relative;
left: 0;
width: 100%;
}
#main_menu.is_open ul {
width: fit-content;
margin: 0 auto;
}
#main_menu.is_open ul li {
display: block;
margin-bottom: 0.5rem;
}
}
.hamburger {
float: right;
background-color: var(--background-secondary);
border: none;
display: none;
}
.icon {
display: block;
mask-size: contain;
background-color: var(--link-secondary);
height: var(--font-size-default);
padding: 0.25rem;
border: solid 1px var(--link-secondary);
transition: background-color 0.2s ease;
}
.icon:hover {
background-color: var(--link-secondary-hover);
}
.hamburger_icon {
display: block;
}
.hamburger_icon.is_open {
display: none ! important;
}
.close_icon {
display: none;
}
.close_icon.is_open {
display: block ! important;
}