<!DOCTYPE html>
<
html
>
<
head
>
<
style
>
body {
margin: 0;
}
header {
display: flex;
/* Using flexbox property for parent
also known as inline-flex */
justify-content: space-between;
/* Items are evenly distributed in
the line; firstitem is on the
start line, last item on the
end line*/
align-items: center;
padding: 5px;
position: fixed;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
}
nav {
order: 1;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a:hover {
color: rgb(255, 255, 255);
}
li a {
display: block;
color: white;
text-align: center;
padding: 5px 5px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4caf50;
}
</
style
>
</
head
>
<
body
>
<
header
>
<
nav
>
<
ul
class
=
"nav_links"
>
<
li
><
a
class
=
"active"
href
=
"#home"
>Home</
a
></
li
>
<
li
><
a
href
=
"#news"
>News</
a
></
li
>
<
li
><
a
href
=
"#contact"
>Contact</
a
></
li
>
<
li
><
a
href
=
"#about"
>About</
a
></
li
>
</
ul
>
</
nav
>
</
header
>
<
div
style="padding: 20px;
background-color: rgba(135, 206, 235, 0.5);
height: 1500px;">
<
h1
style
=
"color: green;"
>
<
br
/>
GeeksforGeeks
</
h1
>
<
h1
>Fixed Flexbox Navigation Bar</
h1
>
<
h2
>Scroll Scroll Scroll......</
h2
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
<
p
>Write Something Write Something Write
Something Write Something..</
p
>
</
div
>
</
body
>
</
html
>