So it says I need to have the navbar always at the top of the viewport. This is my code. It works. The navbar is at the top of the viewport even when I scroll down. I am aware the code is quite messy right now, I was planning to optimise it once I pass all the tests. I have been going through other posts on this topic and used the code they suggested but it just doesn’t work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The New and Improved Bob</title>
<link rel="stylesheet" href="styles.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/>
</head>
<body>
<header id="header">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/MrBeanLogo.png"
class="logo" id="header-img" alt="Mr Bean Logo" loading="lazy">
<h4 class="sr-only">Mr Bean Logo</h4>
<div class="top">
<div class="social-icons">
<a href="https://www.facebook.com/freecodecamp/">
<i class="fab fa-facebook-f"></i>
</a>
<a href="https://twitter.com/freecodecamp/">
<i class="fab fa-twitter"></i>
</a>
<a href="https://instagram.com/freecodecamp">
<i class="fab fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/school/free-code-camp/">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="https://www.youtube.com/freecodecamp">
<i class="fab fa-youtube"></i>
</a>
</div>
<nav id="nav-bar">
<ul class="nav-top">
<li>
<a href="#eyebrows" class="nav-link">Eyebrows</a>
</li>
<li><a href="#bob" class="nav-link">Bob</a>
</li>
<li>
<a href="#car" class="nav-link">Mr Bean's Car</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="divider"></div>
<h1 id="eyebrows" class="header">The Eyebrows</h1>
<p>Lorum ipsum dol amor</p>
<div class="divider"></div>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/FItHgP_l234" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h4 class="sr-only">A video of Mr Bean as Palpatine from Star Wars</h4>
<div class="divider"></div>
<h1 id="bob" class="header">Bob</h1>
<p>Bob is important</p>
<h3 class="list-title">Why Bob is Important</h3>
<ul class="importance">
<li class="bob-list">
<h5 class="list-heading"></h5>
<p class="list-info"></p>
</li>
<li class="bob-list">
<h5 class="list-heading"></h5>
<p class="list-info"></p>
</li>
<li class="bob-list">
<h5 class="list-heading"></h5>
<p class="list-info"></p>
</li>
<li class="bob-list">
<h5 class="list-heading"></h5>
<p class="list-info"></p>
</li>
<li class="bob-list">
<h5 class="list-heading"></h5>
<p class="list-info"></p>
</li>
<li class="bob-list">
<h5 class="list-heading"></h5>
<p class="list-info"></p>
</li>
</ul>
<div class="divider"></div>
<h1 class="header" id="car">Mr Bean's Car</h1>
<figure>
<img src="https://miro.medium.com/max/600/0*m25TkBm7mFCXu0W3" id="car-pic" alt="a picture of a green mini">
<figcaption>This is Mr Bean's Car</figcaption>
</figure>
<div class="divider-2"></div>
<div class="email-div">
<h6>Input your email to recieve regular emails about Mr Bean</h6>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input placeholder="bob@beanmail.com" id="email" type="email" name="email" />
<input id="submit" type="submit" />
</form>
</div>
<div class="divider"></div>
<h1 id="Gallery" class="header">Gallery of Bean</h1>
<div class="gallery">
<img src="https://i.pinimg.com/originals/80/4c/8b/804c8bdde0d0e0e35cdab13f7afee26a.jpg">
<img src="https://sayingimages.com/wp-content/uploads/when-youve-been-playing-pokemon-go-mr-bean-meme.jpg">
<img src="https://images3.memedroid.com/images/UPLOADED416/5ebcb36244e60.jpeg">
<img src="https://i.redd.it/duu3k03jg5o31.jpg">
<img src="https://cdn.memes.com/up/78498541622727283/i/1622961577506.jpg">
<img src="https://e7.pngegg.com/pngimages/786/531/png-clipart-rage-comic-internet-meme-joke-humour-mr-bean-miscellaneous-white.png">
</div>
</body>
<div class="bottom">
<footer class="address">
<h3 class="footer-title">Bob (Mr Bean)</h3>
<p class="footer-info">12 Bob street, New Bobland</p>
</footer>
</div>
</html>
:root {
--div-color1: rgb(210, 150, 100);
--div-color2: rgb(120, 12, 140);
}
html {
background-color: rgb(60, 70, 90);
}
.logo {
width: 100%;
padding-bottom: 20px;
margin-top: 100px;
}
i {
padding: 12px;
color: white;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 2px solid white;
margin-bottom: 5px;
}
a {
text-decoration: none;
}
.top {
background: orangered;
width: 100%;
border: 5px solid red;
}
#nav-bar{
position: fixed;
top: 0;
width: 100%;
background-color: red;
}
.nav-top {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li {
padding: 15px;
list-style: none;
}
.nav-link:first-of-type {
margin-left: -20px
}
.nav-link {
border: 5px solid orange;
padding: 3px;
color: darkgray;
}
.nav-link:hover {
background-color: gray;
border-color: blue;
border-radius: 3px;
color: orange;
}
