Skip to content

Commit 36a7160

Browse files
SeramisSeramis
committed
Header responsiveness improvements and burger menu.
1 parent 900bdcd commit 36a7160

File tree

3 files changed

+134
-56
lines changed

3 files changed

+134
-56
lines changed

‎_includes/partials/footer.njk‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
footer {
33
position: sticky;
44
bottom: 0;
5-
margin-top: 1.5rem;
5+
margin-top: 1rem;
66
padding: 0.5em;
77
background-color: var(--bg-color-secondary);
88
transition: background-color 0.3s;

‎_includes/partials/header.njk‎

Lines changed: 132 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
{% css "common" %}
2+
/* Base styles */
23
header {
34
position: sticky;
45
top: 0;
56
padding: 0.5em;
67
box-shadow: 0 2px 4px var(--shadow-color);
78
background-color: var(--bg-color-secondary);
8-
transition: background-color 0.3s, color 0.3s;
9+
transition: background-color 0.3s;
910

1011
z-index: 1000;
1112
}
@@ -15,101 +16,177 @@ header {
1516
}
1617
}
1718

18-
header:after {
19-
content: "";
20-
display: table;
21-
clear: both;
19+
#header-container {
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
max-width: 70rem;
24+
margin: 0 auto;
25+
}
26+
27+
/* Logo and site title */
28+
.header-left {
29+
display: flex;
30+
align-items: center;
31+
gap: 0.5rem;
32+
font-size: 1.5em;
33+
font-weight: 700;
34+
text-decoration: none !important;
35+
color: var(--text-color);
36+
margin-right: 1em;
37+
white-space: nowrap;
38+
transition: color 0.3s;
39+
}
40+
.header-left img {
41+
height: 2rem;
2242
}
2343

24-
.header-container {
44+
/* Desktop navigation (inline next to logo) */
45+
.desktop-nav {
46+
flex-grow: 1;
47+
}
48+
.desktop-nav ul {
49+
list-style: none;
50+
margin: 0;
51+
padding: 0;
2552
display: flex;
26-
flex-wrap: wrap;
27-
align-items: center;
28-
max-width: 70em;
29-
margin-left: auto;
30-
margin-right: auto;
53+
gap: 1rem;
3154
}
3255

56+
.desktop-nav ul li {
57+
}
58+
59+
.desktop-nav ul li a {
60+
text-decoration: none;
61+
}
62+
.desktop-nav ul li a:hover {
63+
text-decoration: none;
64+
}
65+
.desktop-nav ul li a[aria-current="page"] {
66+
font-weight: 700;
67+
}
68+
69+
/* Right side links */
3370
.header-right {
34-
margin-left: auto;
71+
display: flex;
72+
gap: 1rem;
3573
font-size: 1.5rem;
3674
}
37-
3875
.header-right a {
76+
text-decoration: none;
3977
color: var(--text-color) !important;
40-
margin-left: 0.5rem;
41-
transition: background-color 0.3s, color 0.3s;
78+
cursor: pointer;
79+
transition: color 0.3s;
4280
}
4381
.header-right a:hover {
44-
color: var(--link-color-hover) !important;
82+
color: var(--link-color-hover);
83+
transition: color 0.3s;
4584
}
4685

47-
.home-link {
48-
font-size: 1.5em;
49-
font-weight: 700;
50-
margin-right: 2em;
51-
text-decoration: none !important;
52-
display: flex;
53-
align-items: center;
54-
gap: 0.5rem;
86+
/* Hide the checkbox (used to toggle mobile menu) */
87+
.nav-toggle {
88+
display: none;
5589
}
5690

57-
.home-link .logo-img {
58-
max-height: 32px;
59-
width: auto;
91+
/* Burger menu icon hidden by default */
92+
.burger-menu {
93+
display: none;
94+
cursor: pointer;
95+
}
96+
97+
/* Mobile nav styling */
98+
.mobile-nav {
99+
display: none; /* Hidden by default */
100+
position: absolute;
101+
top: 100%;
102+
left: 0;
103+
right: 0;
104+
background: var(--bg-color-secondary);
105+
box-shadow: 0 2px 4px var(--shadow-color);
106+
transition: background-color 0.3s;
60107
}
61108

62-
/* Nav */
63-
.nav {
64-
display: flex;
65-
padding: 0;
66-
margin: 0;
67-
list-style: none;
68-
align-items: center;
109+
.mobile-nav ul {
110+
list-style: none;
111+
margin: 0;
112+
padding: 0;
69113
}
70-
.nav-item {
71-
display: inline-block;
72-
margin-right: 1em;
114+
115+
.mobile-nav ul li {
116+
border-bottom: 1px solid var(--border-color);
117+
transition: border-color 0.3s;
73118
}
74-
.nav-item a[href]:not(:hover) {
75-
text-decoration: none;
119+
120+
.mobile-nav ul li a {
121+
display: block;
122+
padding: 0.75em 1em;
123+
text-decoration: none;
124+
color: var(--link-color);
125+
transition: color 0.3s;
76126
}
77-
.nav a[href][aria-current="page"] {
127+
.mobile-nav ul li a[aria-current="page"] {
78128
font-weight: 700;
79129
}
80130

81-
.toggle-dark {
82-
cursor: pointer;
131+
/* Mobile Styles */
132+
@media (max-width: 640px) {
133+
/* Hide desktop nav and show burger icon */
134+
.desktop-nav {
135+
display: none;
136+
}
137+
.burger-menu {
138+
display: inline-block;
139+
}
140+
141+
/* When the hidden checkbox is checked, show the mobile nav */
142+
#nav-toggle:checked ~ .mobile-nav {
143+
display: block;
144+
}
83145
}
84146
{% endcss %}
85147

86148
<header>
87-
<div class="header-container">
88-
<a href="/" class="home-link">
149+
<div id="header-container">
150+
<a href="/" class="header-left">
89151
<img eleventy:ignore src="{{ metadata.logo }}" alt="Logo" class="logo-img" />
90152
{{ metadata.title }}
91153
</a>
92154

93-
{#- Read more about `eleventy-navigation` at https://www.11ty.dev/docs/plugins/navigation/ #}
94-
<nav>
95-
<h2 class="visually-hidden">Top level navigation menu</h2>
96-
<ul class="nav">
155+
<!-- Desktop navigation -->
156+
<nav class="desktop-nav">
157+
<ul>
97158
{% for entry in collections.all | eleventyNavigation %}
98-
<li class="nav-item">
159+
<li>
99160
<a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>
100161
{{ entry.title }}
101162
</a>
102163
</li>
103164
{% endfor %}
104165
</ul>
105166
</nav>
106-
107-
<span class="header-right">
167+
168+
<div class="header-right">
108169
<a href="https://github.com/ByteAether" title="{{ metadata.title }}" target="_blank"><i class="fa-brands fa-github"></i></a>
170+
<a onclick="themeManager.toggle()"><i class="fa-solid fa-sun"></i></a>
171+
172+
<label for="nav-toggle" class="burger-menu"><i class="fa-solid fa-bars"></i></label>
173+
</div>
109174

110-
<a class="toggle-dark" onclick="themeManager.toggle()">
111-
<i class="fa-solid fa-sun"></i>
112-
</a>
113-
</span>
175+
176+
<!-- The hidden checkbox to toggle mobile menu -->
177+
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
178+
179+
<!-- Mobile navigation (will slide/drop down when burger is clicked) -->
180+
<nav class="mobile-nav">
181+
<ul>
182+
{% for entry in collections.all | eleventyNavigation %}
183+
<li>
184+
<a href="{{ entry.url }}"{% if entry.url == page.url %} aria-current="page"{% endif %}>
185+
{{ entry.title }}
186+
</a>
187+
</li>
188+
{% endfor %}
189+
</ul>
190+
</nav>
114191
</div>
115192
</header>

‎public/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@ main {
139139
overflow: auto;
140140
padding-left: 0.5rem;
141141
padding-right: 0.5rem;
142+
padding-bottom: 0.5rem;
142143
color: var(--text-color);
143144
transition: background-color 0.3s, color 0.3s;
144145
}

0 commit comments

Comments
 (0)