Challenge: Work with Fixed Positioning
Task
Create a website navigation bar that remains fixed at the top of the webpage for users to access at all times. Steps:
Apply
fixedpositioning to the navigation list.Choose one property for horizontal displacement (
leftorright).Choose one property for vertical displacement (
toporbottom).Test the functionality by clicking on different links and ensuring that the page scrolls while keeping the navigation bar visible.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="navigation">
<li class="navigation-item">
<a href="#home" class="navigation-link">Home</a>
</li>
<li class="navigation-item">
<a href="#about" class="navigation-link">About</a>
</li>
<li class="navigation-item">
<a href="#price" class="navigation-link">Price</a>
</li>
<li class="navigation-item">
<a href="#team" class="navigation-link">Team</a>
</li>
</ul>
<section class="section" id="home">
<h2 class="section-title">Home section</h2>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
possimus praesentium optio perferendis temporibus suscipit ea at nemo
dolorum esse sed ullam sunt, eos ratione ipsam voluptatibus minima
maxime aperiam harum adipisci magnam. Eaque neque, enim iusto vel unde
quo iure magni, similique perferendis dolorem, architecto pariatur error
blanditiis necessitatibus. Ut alias incidunt doloribus tempora iusto
explicabo mollitia cupiditate voluptatibus quibusdam reiciendis
voluptate at ipsum ratione cumque commodi debitis eos possimus, nostrum
corporis nesciunt nulla!
</p>
</section>
<section class="section" id="about">
<h2 class="section-title">About section</h2>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.navigation {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #d64343;
width: 100%;
}
.navigation {
/* --------------- Make changes below this line --------------- */
position: ___;
___: ___;
___: ___;
/* --------------- Make changes above this line --------------- */
}
/* Not the current focus */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.section {
margin: 0 auto;
padding: 20px 30px;
background-color: lightblue;
}
.section:not(:last-child) {
margin-bottom: 30px;
}
Set the
topproperty to0to keep the navigation at the top of the web page.For horizontal positioning, you can use either
left: 0;to align it with the viewport's left edge orright: 0;to align it with the right edge.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul class="navigation">
<li class="navigation-item">
<a href="#home" class="navigation-link">Home</a>
</li>
<li class="navigation-item">
<a href="#about" class="navigation-link">About</a>
</li>
<li class="navigation-item">
<a href="#price" class="navigation-link">Price</a>
</li>
<li class="navigation-item">
<a href="#team" class="navigation-link">Team</a>
</li>
</ul>
<section class="section" id="home">
<h2 class="section-title">Home section</h2>
<p class="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
possimus praesentium optio perferendis temporibus suscipit ea at nemo
dolorum esse sed ullam sunt, eos ratione ipsam voluptatibus minima
maxime aperiam harum adipisci magnam. Eaque neque, enim iusto vel unde
quo iure magni, similique perferendis dolorem, architecto pariatur error
blanditiis necessitatibus. Ut alias incidunt doloribus tempora iusto
explicabo mollitia cupiditate voluptatibus quibusdam reiciendis
voluptate at ipsum ratione cumque commodi debitis eos possimus, nostrum
corporis nesciunt nulla!
</p>
</section>
<section class="section" id="about">
<h2 class="section-title">About section</h2>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
.navigation {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
background-color: #d64343;
width: 100%;
}
.navigation {
position: fixed;
top: 0;
left: 0;
}
/* Not the current focus */
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.section {
margin: 0 auto;
padding: 20px 30px;
background-color: lightblue;
}
.section:not(:last-child) {
margin-bottom: 30px;
}
ul {
padding-left: 0;
Alt var klart?
Takk for tilbakemeldingene dine!
Seksjon 2. Kapittel 7
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
