Skip to content

Commit ae23cf9

Browse files
committed
Section 9 - Mobile Navigation Toggle
1 parent 5eca3ad commit ae23cf9

File tree

3 files changed

+87
-1
lines changed

3 files changed

+87
-1
lines changed

starter/07-Omnifood-Desktop/css/query.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@ font size in html media queries
121121

122122
.btn-mobile-nav {
123123
display: block;
124+
z-index: 9999;
124125
}
125126

126127
/* MOBILE NAVIGATION */

starter/07-Omnifood-Desktop/index.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
nomodule
2323
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
2424
></script>
25+
26+
<script defer src="js/script.js"></script>
27+
2528
<title>Omnifood</title>
2629
</head>
2730
<body>
@@ -637,7 +640,8 @@ <h2 class="heading-secondary">Get your first meal for free!</h2>
637640
</ul>
638641

639642
<p class="copyright">
640-
Copyright &copy; 2027 by Omnifood, Inc. All rights reserved.
643+
Copyright &copy; <span class="year">2027</span> by Omnifood, Inc.
644+
All rights reserved.
641645
</p>
642646
</div>
643647

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
document.querySelector(".year").textContent = new Date().getFullYear();
2+
3+
document
4+
.querySelector(".btn-mobile-nav")
5+
.addEventListener("click", function () {
6+
const headerEl = document.querySelector(".header");
7+
headerEl.classList.toggle("nav-open");
8+
});
9+
10+
///////////////////////////////////////////////////////////
11+
// Fixing flexbox gap property missing in some Safari versions
12+
function checkFlexGap() {
13+
var flex = document.createElement("div");
14+
flex.style.display = "flex";
15+
flex.style.flexDirection = "column";
16+
flex.style.rowGap = "1px";
17+
18+
flex.appendChild(document.createElement("div"));
19+
flex.appendChild(document.createElement("div"));
20+
21+
document.body.appendChild(flex);
22+
var isSupported = flex.scrollHeight === 1;
23+
flex.parentNode.removeChild(flex);
24+
console.log(isSupported);
25+
26+
if (!isSupported) document.body.classList.add("no-flexbox-gap");
27+
}
28+
checkFlexGap();
29+
30+
// https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js
31+
32+
/*
33+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
34+
margin-right: 4.8rem;
35+
}
36+
37+
.no-flexbox-gap .list-item:not(:last-child) {
38+
margin-bottom: 1.6rem;
39+
}
40+
41+
.no-flexbox-gap .list-icon:not(:last-child) {
42+
margin-right: 1.6rem;
43+
}
44+
45+
.no-flexbox-gap .delivered-faces {
46+
margin-right: 1.6rem;
47+
}
48+
49+
.no-flexbox-gap .meal-attribute:not(:last-child) {
50+
margin-bottom: 2rem;
51+
}
52+
53+
.no-flexbox-gap .meal-icon {
54+
margin-right: 1.6rem;
55+
}
56+
57+
.no-flexbox-gap .footer-row div:not(:last-child) {
58+
margin-right: 6.4rem;
59+
}
60+
61+
.no-flexbox-gap .social-links li:not(:last-child) {
62+
margin-right: 2.4rem;
63+
}
64+
65+
.no-flexbox-gap .footer-nav li:not(:last-child) {
66+
margin-bottom: 2.4rem;
67+
}
68+
69+
@media (max-width: 75em) {
70+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
71+
margin-right: 3.2rem;
72+
}
73+
}
74+
75+
@media (max-width: 59em) {
76+
.no-flexbox-gap .main-nav-list li:not(:last-child) {
77+
margin-right: 0;
78+
margin-bottom: 4.8rem;
79+
}
80+
}
81+
*/

0 commit comments

Comments
 (0)