Please, Help Error 3. The navbar should always be at the top of the viewport

HTML-CSS
1

Hello Everyone,

I have been working for the last day trying to complete the course for Responsive Web design, but I’m stuck on this error.

3. The navbar should always be at the top of the viewport.
Navbar's parent should be body and it should be at the top of the viewport : expected -402 to be close to 0 +/- 15
AssertionError: Navbar's parent should be body and it should be at the top of the viewport : expected -402 to be close to 0 +/- 15

I’ve already read all the information for CSS layout on MDN and W3Schools and also checked similar errors on Stackoverflow , however I am still getting the same error.

This is the link to my project.

CSS:

html, body {
  background-color: #333;
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

h1 {
  color: #e0dfdc;
  background-color: #333;
  letter-spacing: .1em;
  text-shadow:
  0 -1px 0 #fff,
  0 1px 0 #2e2e2e,
  0 2px 0 #2c2c2c,
  0 3px 0 #2a2a2a,
  0 4px 0 #282828,
  0 5px 0 #262626,
  0 6px 0 #242424,
  0 7px 0 #222,
  0 8px 0 #202020,
  0 9px 0 #1e1e1e,
  0 10px 0 #1c1c1c,
  0 11px 0 #1a1a1a,
  0 12px 0 #181818,
  0 13px 0 #161616,
  0 14px 0 #141414,
  0 15px 0 #121212,
  0 22px 30px rgba(0, 0, 0, 0.9);
  text-align: center;
}

h5 {
  color: #e0dfdc;
  padding-bottom: 35px;
  background-color: #333;
  letter-spacing: .1em;
  text-shadow:
  0 -1px 0 #fff,
  0 1px 0 #2e2e2e,
  0 2px 0 #2c2c2c,
  0 3px 0 #2a2a2a,
  0 4px 0 #282828,
  0 5px 0 #262626,
  0 6px 0 #242424,
  0 7px 0 #222,
  0 8px 0 #202020,
  0 9px 0 #1e1e1e,
  0 10px 0 #1c1c1c,
  0 11px 0 #1a1a1a,
  0 12px 0 #181818,
  0 13px 0 #161616,
  0 14px 0 #141414,
  0 15px 0 #121212,
  0 22px 30px rgba(0, 0, 0, 0.9);
  text-align: center;
}

.col-4 {
  display: flex;

}

.githubImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.navbar {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  padding-top: 0 !important;
  margin: 15px;

}


#welcome-section {
  height: 100vh;
  padding-top: 20px;
}

.wlecome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.welcome-section > p {
  font-size: 3rem;
  font-weight: 200;
  font-style: italic;

}


@media (max-width: 75em) {
  html {
    font-size: 60%;
  }
}


@media (max-width: 61.25em) {
  html {
    font-size: 58%;
  }
}

@media (max-width: 28.75em) {
  html {
    font-size: 55%;
  }
}

@media (max-width: 28.75em) {
    .navbar {
      justify-content: center;
    }
}

Hope you can advice on this , Thank you in advance for the help.

Regards

2

You have to use position property with value as position: fixed and then make it to top: 0; left: 0; and apply a width: 100%;

1 Like
3

Thank you for reply , but that is really the issue , I’ve already set those settings on CSS however I am still getting the error on the test.

These is the Navbar class CSS settings

.navbar {
  display: flex;
  justify-content: flex-end;
  position: fixed;
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  padding-top: 0 !important;
  margin: 15px;

}

Above is the full CSS , Thank again for the help and support.

Regards

4

Bootstrap is overwriting the position. If you are going to use Bootstrap you can use its classes to do most of it, i.e. add the fixed-top class to the nav.

Otherwise, you have to overwrite the Bootstrap styles using !important.

position: fixed !important;
5

Thank you for the clarification, actually, I was just reading navbar documentation on Bootstrap and I get the conclusion issue was bootstrap , but don’t know how to fix it until your answer, again thanks

Regards

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.