Skip to content

Commit 264dce0

Browse files
Andrew-devcoderAndrew-devcoder
committed
header fix
1 parent 69ddea6 commit 264dce0

8 files changed

+127
-100
lines changed

‎css/style.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+31-29
Original file line numberDiff line numberDiff line change
@@ -12,38 +12,40 @@
1212
<title>Explore</title>
1313
</head>
1414
<body>
15+
<header class="header">
16+
<div class="container">
17+
<div class="header__items">
18+
<div class="header__logo">
19+
<svg
20+
xmlns="http://www.w3.org/2000/svg"
21+
width="64"
22+
height="64"
23+
viewBox="0 0 64 64"
24+
fill="none"
25+
>
26+
<path
27+
d="M54.8268 10.4266C56.4002 11.9999 56.4002 14.5333 54.8268 16.0799L44.4535 26.4533L50.1068 50.9599L46.3468 54.7466L36.0002 34.9333L25.6002 45.3333L26.5602 51.9199L23.7068 54.7466L19.0135 46.2666L10.5068 41.5466L13.3335 38.6666L20.0002 39.6533L30.3202 29.3333L10.5068 18.9066L14.2935 15.1466L38.8002 20.7999L49.1735 10.4266C50.6668 8.87993 53.3335 8.87993 54.8268 10.4266Z"
28+
fill="white"
29+
/>
30+
</svg>
31+
Adventure
32+
</div>
33+
<nav class="header__nav">
34+
<ul>
35+
<li><a href="#">HOME</a></li>
36+
<li><a href="#">ABOUT</a></li>
37+
<li><a href="#">DESTINATION</a></li>
38+
<li><a href="#">TOUR</a></li>
39+
<li><a href="#">BLOG</a></li>
40+
</ul>
41+
<a class="button button__intro" href="#">BOOK NOW</a>
42+
</nav>
43+
</div>
44+
</div>
45+
</header>
1546
<main>
1647
<div class="intro">
1748
<div class="container">
18-
<div class="header">
19-
<div class="header__logo">
20-
<svg
21-
xmlns="http://www.w3.org/2000/svg"
22-
width="64"
23-
height="64"
24-
viewBox="0 0 64 64"
25-
fill="none"
26-
>
27-
<path
28-
d="M54.8268 10.4266C56.4002 11.9999 56.4002 14.5333 54.8268 16.0799L44.4535 26.4533L50.1068 50.9599L46.3468 54.7466L36.0002 34.9333L25.6002 45.3333L26.5602 51.9199L23.7068 54.7466L19.0135 46.2666L10.5068 41.5466L13.3335 38.6666L20.0002 39.6533L30.3202 29.3333L10.5068 18.9066L14.2935 15.1466L38.8002 20.7999L49.1735 10.4266C50.6668 8.87993 53.3335 8.87993 54.8268 10.4266Z"
29-
fill="white"
30-
/>
31-
</svg>
32-
Adventure
33-
</div>
34-
<nav class="header__nav">
35-
<ul>
36-
<li><a href="#">HOME</a></li>
37-
<li><a href="#">ABOUT</a></li>
38-
<li><a href="#">DESTINATION</a></li>
39-
<li><a href="#">TOUR</a></li>
40-
<li><a href="#">BLOG</a></li>
41-
</ul>
42-
<a class="button button__intro" href="#"
43-
>BOOK NOW</a
44-
>
45-
</nav>
46-
</div>
4749
<h1 class="intro__title">Explore</h1>
4850
<h3 class="intro__subtitle">THE WORLD WITH US</h3>
4951

‎script.js

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1+
window.addEventListener("scroll", function () {
2+
let navbar = document.querySelector(".header");
3+
if (
4+
document.body.scrollTop > 50 ||
5+
document.documentElement.scrollTop > 50
6+
) {
7+
navbar.classList.add("shrink");
8+
} else {
9+
navbar.classList.remove("shrink");
10+
}
11+
});
12+
113
const buttonToUp = document.querySelector(".button__scroll");
214

315
window.addEventListener("scroll", () => {
@@ -14,15 +26,3 @@ buttonToUp.addEventListener("click", () => {
1426
behavior: "smooth",
1527
});
1628
});
17-
// $(window).scroll(function () {
18-
// if ($(window).scrollTop() > 300) {
19-
// btn.addClass("show");
20-
// } else {
21-
// btn.removeClass("show");
22-
// }
23-
// });
24-
25-
// btn.on("click", function (e) {
26-
// e.preventDefault();
27-
// $("html, body").animate({ scrollTop: 0 }, "300");
28-
// });

‎scss/_button.scss

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
.button {
22
border-radius: 84px;
3+
padding: 25px 44px;
4+
35
&__intro {
46
border: 3px solid #ffffff;
5-
padding: 18px 44px;
67
}
78
&__rectangle {
89
background: #ffffff;
910
border: 3px solid #ffffff;
10-
padding: 18px 36px;
1111
}
1212

1313
&__discover {
1414
background: #f0aa21;
15-
padding: 18px 47px;
1615
}
1716

1817
&__scroll {
@@ -47,7 +46,6 @@
4746
margin: 0 10px 0 0;
4847

4948
animation: arrow-up 2s infinite;
50-
5149
}
5250

5351
&:hover {

‎scss/_global.scss

+9
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
11
body {
22
font-family: "Inter";
33
}
4+
5+
.header.shrink {
6+
height: 100px;
7+
color: black;
8+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
9+
background: rgba(0, 0, 0, 0.2);
10+
// border-bottom: 1px solid white;
11+
backdrop-filter: blur(8px);
12+
}

0 commit comments

Comments
 (0)