Skip to content

Commit 9fc220c

Browse files
jessicarushjessicarush
committed
Initial commit
1 parent 39ae945 commit 9fc220c

File tree

3 files changed

+456
-0
lines changed

3 files changed

+456
-0
lines changed

‎css_sticky_navigation/css/style.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
html {
7+
background: #43b29d;
8+
}
9+
10+
body {
11+
color: #fff;
12+
font-size: 18px;
13+
text-align: center;
14+
font-family: sans-serif;
15+
}
16+
17+
/* Navigation Settings */
18+
nav {
19+
position: sticky;
20+
top: 0;
21+
width: 100%;
22+
height: 70px;
23+
background: #fff;
24+
}
25+
26+
nav li {
27+
display: inline-block;
28+
padding: 24px 10px;
29+
}
30+
31+
nav li a {
32+
color: #757575;
33+
text-transform: uppercase;
34+
font-size: 16px;
35+
}
36+
37+
a {
38+
text-decoration: none;
39+
}
40+
41+
section {
42+
height: 100vh;
43+
padding: 15px;
44+
}
45+
46+
/* Screens Settings */
47+
#screen1 {
48+
background: #43b29d;
49+
}
50+
51+
#screen2 {
52+
background: #efc94d;
53+
}
54+
55+
#screen3 {
56+
background: #e1793d;
57+
}
58+
59+
@media only screen and (max-width: 520px) {
60+
61+
nav li {
62+
padding: 2px 4px;
63+
}
64+
65+
nav li a {
66+
font-size: 14px;
67+
}
68+
69+
}

‎css_sticky_navigation/index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<!-- Meta tags & title /-->
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1, maximum-scale=1" />
9+
<meta name="robots" content="all,index,follow" />
10+
11+
<title>
12+
Scroll To Top Then Fixed Navigation Effect
13+
</title>
14+
<meta
15+
name="description"
16+
content="Create a sticky navigation bar that remains fixed to the top after scroll" />
17+
18+
<link rel="stylesheet" type="text/css" href="css/style.css" />
19+
<!-- Main stylesheet /-->
20+
</head>
21+
22+
<body>
23+
<section id="screen1"><p>scroll down</p></section>
24+
25+
<nav>
26+
<ul>
27+
<li><a href="#">Home</a></li>
28+
<li><a href="#">About</a></li>
29+
<li><a href="#">Services</a></li>
30+
<li><a href="#">Team</a></li>
31+
<li><a href="#">Contact</a></li>
32+
</ul>
33+
</nav>
34+
35+
<section id="screen2"><p>section 2</p></section>
36+
<section id="screen3"><p>section 3</p></section>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)