Skip to content

Commit 8610c18

Browse files
chryzcodechryzcode
authored
Merge pull request #348 from Timonwa/NavBarBug
fixed nav menu bug on smaller screen.
2 parents 43cdbb2 + c52e354 commit 8610c18

File tree

3 files changed

+113
-94
lines changed

3 files changed

+113
-94
lines changed

‎docs/css/global.css‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ body {
4848
/* @media (min-width: 1024px) { ... } */
4949
--xl: 1280px;
5050
/* @media (min-width: 1280px) { ... } */
51+
52+
/* units */
53+
--navbar-height: 80px;
5154
}
5255

5356
body {
@@ -66,8 +69,8 @@ h6 {
6669
}
6770

6871
ul {
69-
margin: 0;
70-
padding: 0;
72+
margin: 0;
73+
padding: 0;
7174
list-style: none;
7275
}
7376

@@ -133,9 +136,9 @@ textarea:focus {
133136
}
134137

135138
.btn-primary:hover {
136-
background: #fff;
137-
border: 1px solid var(--primaryBtn);
138-
color: var(--primaryBtn);
139+
background: #fff;
140+
border: 1px solid var(--primaryBtn);
141+
color: var(--primaryBtn);
139142
}
140143

141144
.btn-secondary {
@@ -147,9 +150,9 @@ textarea:focus {
147150
}
148151

149152
.btn-secondary:hover {
150-
background: #fff;
151-
color: var(--secondaryBtn);
152-
border: 1px solid var(--secondaryBtn);
153+
background: #fff;
154+
color: var(--secondaryBtn);
155+
border: 1px solid var(--secondaryBtn);
153156
}
154157

155158
.btn-rounded {
@@ -158,17 +161,17 @@ textarea:focus {
158161

159162
/* Card */
160163
.box {
161-
display: flex;
162-
justify-content: center;
163-
align-items: center;
164-
padding: 1rem;
164+
display: flex;
165+
justify-content: center;
166+
align-items: center;
167+
padding: 1rem;
165168
}
166169

167170
.box img {
168-
width: 170px;
169-
object-fit: cover;
170-
object-position: center;
171-
border-radius: 50%;
171+
width: 170px;
172+
object-fit: cover;
173+
object-position: center;
174+
border-radius: 50%;
172175
}
173176

174177
.container {
@@ -201,11 +204,11 @@ textarea:focus {
201204
box-shadow: 3px 5px 5px var(--shadow);
202205
}
203206

204-
@media(max-width: 1000px) {
205-
.box {
206-
display: flex;
207-
justify-content: space-around;
208-
border-bottom: 1px solid var(--heading);
209-
/* border-radius: 20px; */
210-
}
207+
@media (max-width: 1000px) {
208+
.box {
209+
display: flex;
210+
justify-content: space-around;
211+
border-bottom: 1px solid var(--heading);
212+
/* border-radius: 20px; */
213+
}
211214
}

‎docs/css/styles.css‎

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
justify-content: space-between;
66
padding: 20px;
77
width: 100%;
8-
height: 80px;
8+
height: var(--navbar-height);
99
position: fixed;
1010
top: 0;
1111
background-color: var(--footerDarkBg);
@@ -115,7 +115,12 @@ nav ul li a:focus {
115115
/* Media Query For Mobile View */
116116
@media screen and (max-width: 867px) and (max-width: 767px) {
117117
nav ul li {
118-
padding: 46px 0;
118+
/*? 100% divided by the current number of nav links which is 4 so that each nav links have the same height on whatever the height of the screen with the minimum height being 50px */
119+
height: calc(100% / 4);
120+
min-height: 50px;
121+
display: flex;
122+
align-items: center;
123+
background-color: inherit;
119124
}
120125

121126
nav ul li a {
@@ -141,8 +146,9 @@ nav ul li a:focus {
141146
.nav-list {
142147
position: absolute;
143148
right: 0;
144-
height: 100vh;
145-
top: 8vh;
149+
/*? the height of the nav list is 100% - the height of the nav bar, so whatever you set the navbar height variable to, it will automatically be calculated and the nav-list will not shift its position under the navbar. and the top position is also equal to the nav bar height. */
150+
height: calc(100vh - var(--navbar-height));
151+
top: var(--navbar-height);
146152
background-color: var(--footerDarkBg);
147153
display: flex;
148154
flex-direction: column;
@@ -163,10 +169,6 @@ nav ul li a:focus {
163169
}
164170

165171
@media screen and (max-width: 767px) and (max-width: 667px) {
166-
.nav-list {
167-
top: 9vh;
168-
}
169-
170172
.burger {
171173
display: block;
172174
margin-right: 13rem;
@@ -227,7 +229,7 @@ nav ul li a:focus {
227229

228230
/* Projects */
229231

230-
.projects .project-box{
232+
.projects .project-box {
231233
display: block;
232234
transition: all 0.4s ease-in-out;
233235
height: 100%;
@@ -259,7 +261,7 @@ nav ul li a:focus {
259261
}
260262

261263
.project-content {
262-
padding: .5rem 1rem;
264+
padding: 0.5rem 1rem;
263265
background-color: #212529;
264266
color: #fff;
265267
display: flex;
@@ -310,106 +312,106 @@ nav ul li a:focus {
310312

311313
/* Moderators section */
312314
#moderators {
313-
padding: 2rem 1rem 1rem;
314-
margin-top: 2rem;
315-
background: var(--darkBackground);
316-
color: #fff;
317-
position: relative;
315+
padding: 2rem 1rem 1rem;
316+
margin-top: 2rem;
317+
background: var(--darkBackground);
318+
color: #fff;
319+
position: relative;
318320
}
319321

320322
#moderators .text-center {
321-
font-weight: 700;
322-
font-size: 1.5rem;
323-
margin-bottom: 3rem;
324-
color: grey;
323+
font-weight: 700;
324+
font-size: 1.5rem;
325+
margin-bottom: 3rem;
326+
color: grey;
325327
}
326328

327329
#moderators .text-center a {
328-
font-size: 1.2rem;
329-
color: grey;
330+
font-size: 1.2rem;
331+
color: grey;
330332
}
331333

332334
#moderators .text-center a:hover {
333-
text-decoration: underline;
335+
text-decoration: underline;
334336
}
335337

336338
.overlay {
337-
position: absolute;
338-
top: 140px;
339-
left: 50%;
340-
width: 1px;
341-
height: 700px;
342-
background: var(--heading);
339+
position: absolute;
340+
top: 140px;
341+
left: 50%;
342+
width: 1px;
343+
height: 700px;
344+
background: var(--heading);
343345
}
344346

345347
.user-profile {
346-
padding: 1rem 0.5rem;
347-
margin-left: 1rem;
348+
padding: 1rem 0.5rem;
349+
margin-left: 1rem;
348350
}
349351

350352
.user-profile h3 {
351-
margin-bottom: 0.2rem;
352-
font-size: 1.3rem;
353-
color: #fff;
354-
font-weight: 600;
353+
margin-bottom: 0.2rem;
354+
font-size: 1.3rem;
355+
color: #fff;
356+
font-weight: 600;
355357
}
356358

357359
.user-profile p {
358-
font-size: 0.9rem;
359-
margin-bottom: 1rem;
360+
font-size: 0.9rem;
361+
margin-bottom: 1rem;
360362
}
361363

362364
.user-profile ul {
363-
color: #c0baba;
364-
margin: 1.2rem 0 0.5rem;
365+
color: #c0baba;
366+
margin: 1.2rem 0 0.5rem;
365367
}
366368

367369
.user-profile li {
368-
font-size: 0.8rem;
370+
font-size: 0.8rem;
369371
}
370372

371373
.social-profiles a {
372-
color: #fff;
373-
margin: 0 0.3rem;
374+
color: #fff;
375+
margin: 0 0.3rem;
374376
}
375377

376378
.social-profiles a:hover {
377-
color: grey;
378-
}
379+
color: grey;
380+
}
379381

380382
#moderators .box-container {
381-
display: grid;
382-
grid-template-columns: repeat(2, 1fr);
383-
grid-gap: 3rem;
384-
margin: 2rem;
383+
display: grid;
384+
grid-template-columns: repeat(2, 1fr);
385+
grid-gap: 3rem;
386+
margin: 2rem;
385387
}
386388

387389
/* Responsive Moderators */
388-
@media(max-width: 1000px) {
389-
#moderators .container {
390-
width: 100%;
391-
}
390+
@media (max-width: 1000px) {
391+
#moderators .container {
392+
width: 100%;
393+
}
392394

393-
#moderators .box-container {
394-
display: grid;
395-
grid-template-columns: repeat(1, 1fr);
396-
row-gap: 1rem;
397-
column-gap: 0rem;
398-
margin: 0rem;
399-
}
395+
#moderators .box-container {
396+
display: grid;
397+
grid-template-columns: repeat(1, 1fr);
398+
row-gap: 1rem;
399+
column-gap: 0rem;
400+
margin: 0rem;
401+
}
400402

401-
#moderators .overlay {
402-
display: none;
403-
}
403+
#moderators .overlay {
404+
display: none;
405+
}
404406

405-
.user-profile h3 {
406-
font-size: 1.08rem;
407-
}
407+
.user-profile h3 {
408+
font-size: 1.08rem;
409+
}
408410
}
409411

410412
/* Footer starts */
411413
.footer {
412-
display: flex;
414+
display: flex;
413415
background-color: var(--footerDarkBg);
414416
}
415417

‎docs/javascript/script.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ const navToggle = () => {
44
const navList = document.querySelector('.nav-list');
55
const navLinks = document.querySelectorAll('.nav-list li');
66

7+
// Click function on burger menu
78
burger.addEventListener('click', () => {
8-
// Toggle Navbar
9+
// Toggle Navbar and Burger
910
navList.classList.toggle('active');
1011
burger.classList.toggle('toggle');
1112

@@ -20,8 +21,18 @@ const navToggle = () => {
2021
}
2122
});
2223
});
23-
};
2424

25+
// Click function on nav links
26+
navLinks.forEach((link) => {
27+
link.addEventListener('click', () => {
28+
navList.classList.remove('active');
29+
burger.classList.remove('toggle');
30+
navLinks.forEach((link) => {
31+
link.style.animation = '';
32+
});
33+
});
34+
});
35+
};
2536
navToggle();
2637

2738
// GitHub Projects
@@ -65,14 +76,17 @@ githubprojects.forEach((project) => {
6576
getproject(project);
6677
});
6778

68-
function getproject({name, background}) {
79+
function getproject({ name, background }) {
6980
fetch(`https://api.github.com/repos/${name}`)
7081
.then((response) => {
7182
return response.json();
7283
})
7384
.then((project) => {
7485
// we add the project card directly to the html dom
75-
githubprojectsdomelement.innerHTML += createprojectcard(project, background);
86+
githubprojectsdomelement.innerHTML += createprojectcard(
87+
project,
88+
background
89+
);
7690
});
7791
}
7892

@@ -81,7 +95,7 @@ function createprojectcard(project, background) {
8195
project.description = project.description.replace(/:[^}]*:/, '');
8296

8397
// TODO: add Project Card
84-
let projectcard = `<div class="col-12 col-sm-6 col-lg-4">
98+
let projectcard = `<div class="col-12 col-sm-6 col-lg-4">
8599
<a href="${project.html_url}" class="project-box">
86100
<div class="item project">
87101
<img src="./assets/projects/${background}" class="project-image" alt="${project.name}">
@@ -91,6 +105,6 @@ function createprojectcard(project, background) {
91105
</div>
92106
</div>
93107
</a>
94-
</div>`
108+
</div>`;
95109
return projectcard;
96110
}

0 commit comments

Comments
 (0)