Landing Page Project , Step 13

Guys, what should I do?
I have already fixed my navigation bar on the top (when I scroll it is always on the top), but I can’t pass further because the error message says “Your #nav-bar should always be at the top of the viewport.”

Here is the link to the challenge:

You can see my html and CSS codes below

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Landing Page</title>
  </head>
  <body>
    <header id="header">
      <div id="head">
      <img id="header-img" src="https://thumbs.dreamstime.com/b/tea-shop-logo-symbol-vector-illustration-design-template-183498206.jpg">
       <div id="nav-div">
      <nav id="nav-bar">
        <a class="nav-link" href=#aboutUs>About us</a>
        <a class="nav-link" href=#shop>Shop</a>
        <a class="nav-link" href=#delivery>Delivery</a>
      </nav>
      </div>
     </div>
    </header>
    <main>
      <h1>Tea Shop</h1>
      <h4>Welcome to the coziest place!</h4>
      <section id="aboutUs">
        <h3 class="main-menu">About us</h3>
        <p>Our shop was created in 1998 by our brilliant Mark Stevenson. The first package of tea was delivered from China by Mark himself. These days our team counts more than 1500 employees across the whole world to let you enjoy different tea flavours!</p>
        </section>
        <section>
        <div id="video-div">
        <video id="video" controls src="https://youtu.be/lAYRZeDJ4Pc?si=49QB3hAIhbuHzRSc/" alt="Video about different tea types">
        </div>
      </section>
      <section id="shop">
        <h3 class="main-menu">Shop</h3>
        <div id="tea-div">
          <figure>
            <img class="tea" src="https://avatars.mds.yandex.net/i?id=37cdc381ee70c6bc81bbf2c15c229a9d_l-5222762-images-thumbs&n=33&w=1080&h=720&q=60">
            <figcaption>Green Tea</figcaption>
          </figure>
          <figure>
            <img class="tea" src="https://avatars.mds.yandex.net/i?id=79b789537b1a53e5529e7ab93ad2193a018b5449-12503309-images-thumbs&n=13">
            <figcaption>Black Tea</figcaption>
          </figure>
          <figure>
            <img class="tea" src="https://povarenka.net/wp-content/uploads/2018/08/Sorta-krasnogo-chaia-1.jpg">
            <figcaption>Red Tea</figcaption>
           </figure>
         </div>
      </section>
      <section id="delivery">
        <h3 class="main-menu">Delivery</h3>
        <legend>How would you like to get your tea?</legend>
        <input type="radio" id="pick" name="delivery">
        <label for="pick">I can pick my tea by myself</label><br>
        <input type="radio" id="send" name="delivery">
        <label for="send">I need delivery</label for>
      </section>
      <section>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <label for="email">Subscribe to our newsletter now!</label>
          <input type="email" id="email" name="email" placeholder="Enter your email here...">
          <input id="submit" type="submit">
        </form>
      </section>
    </main>
    <footer>
      <h6> 17495, 5th Avenue Street, New York, California</h6>
    </footer>
</html>
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-size: 16;
  
}

main {
  background: linear-gradient(#f5deb3, #cd853f, #deb887);
  padding: 1vw;
}

#nav-div {
  position: fixed;
  top: 0;
  right: 10vw;
}
  
h1,h4 {
  text-align: center;
}

.main-menu {
  text-align: center;
}

#header, footer{
  background-color: #deb887;
}

#header-img {
  border-radius: 50%;
  width: 25vw;
  height: 25vw;
  max-width: 500px;
  max-height: 500px;
}

#tea-div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: space-evenly;
}

.tea {
  width: 30vw;
  height: 30vw;
}

section:not(:last-of-type){
 margin: 10vh 0;
}

footer {
  height: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1vw;
}

#video-div {
  display: flex;
  justify-content: center;
  border: 5vh;
}

.nav-link {
  color: #000000;
}

#head {
  display: flex;
  flex-direction: row;
  justify-content: space-between 
}

@media screen only and(max-width: 786px) {
  #video {
    width: 70vw;
    height: 30vh;
  }
}

i haven’t tried your code but usually a fix for this issue is to take away all paddings and margins and set top to 0.

ps. if you want to encourage people to try your code, pls post a link to the challenge.

1 Like

Thank you for your suggestion. Unfortunately, it doesn’t help (I’ve tried to remove all margins and paddings, but nothing has changed):confused:

create a selector that is select #nav-bar within the #nav-div
@JackLantern

#nav-div #nav-bar {…

Still nothing :sob:

example

parentElement > childElement {
  position: fixed;
  top:0;
}

Also no​:thinking::thinking::thinking: it is really weird

I have fixed your markdown, the three backticks need to go on a line of their own

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like

post your modified code here , properly using three back ticks below and above your code block

* {
  box-sizing: border-box;
  margin: 0; 
}

body {
  font-size: 16;
}

main {
  background: linear-gradient(#f5deb3, #cd853f, #deb887);
  padding: 1vw; 
}

 #nav-div > #nav-bar {
  position: fixed;
  top: 0px;
 right: 3vw;
}
  
h1,h4 {
  text-align: center;
}

.main-menu {
  text-align: center;
}

#header, footer{
  background-color: #deb887;
}

#header-img {
  border-radius: 50%;
  width: 25vw;
  height: 25vw;
  max-width: 500px;
  max-height: 500px;
}

#tea-div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: space-evenly;
}

.tea {
  width: 30vw;
  height: 30vw;
}

section:not(:last-of-type){
  margin: 10vh 0;
}

footer {
  height: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1vw;
}

#video-div {
  display: flex;
  justify-content: center;
  border: 5vh;
}

.nav-link {
  color: #000000;
}

#head {
  display: flex;
  flex-direction: row;
  justify-content: space-between 
}

@media screen only and(max-width: 786px) {
  #video {
    width: 70vw;
    height: 30vh;
  }
}

why you are selecting the header? you need to select #nav-div becuse you have your #nav-bar within that. above css selector is target an element that within another element.
@JackLantern

I have tried both options, and #nav-div and the header like in your example…

now i seen. try to select
, #header > #head > #nav-div > #nav-bar

it should work with #nav-bar only, there is no need for hyper specific selectors in a small project

Can you imagine? Still the same error

well. but for @JackLantern it is not working.

always post your modified code, till you did not found the solution

1 Like

nothing works, so let’s go back to the basics
please pass your html code in an html validator and fix all the errors: Ready to check - Nu Html Checker

same for the css: https://jigsaw.w3.org/css-validator/validator

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Landing Page</title>
  </head>
  <body>
    <header id="header">
      <div id="head">
      <img id="header-img" src="https://thumbs.dreamstime.com/b/tea-shop-logo-symbol-vector-illustration-design-template-183498206.jpg" alt="tea">
       <div id="nav-div">
        <nav id="nav-bar">
        <a class="nav-link" href=#aboutUs>About us</a>
        <a class="nav-link" href=#shop>Shop</a>
        <a class="nav-link" href=#delivery>Delivery</a>
      </nav>
      </div>
     </div>
    </header>
    <main>
      <h1>Tea Shop</h1>
      <h4>Welcome to the coziest place!</h4>
      <section id="aboutUs">
        <h3 class="main-menu">About us</h3>
        <p>Our shop was created in 1998 by our brilliant Mark Stevenson. The first package of tea was delivered from China by Mark himself. These days our team counts more than 1500 employees across the whole world to let you enjoy different tea flavours!</p>
        </section>
        <section>
        <div id="video-div">
         <iframe id="video" src="https://youtu.be/lAYRZeDJ4Pc?si=49QB3hAIhbuHzRSc/"></iframe>
        </div>
      </section>
      <section id="shop">
        <h3 class="main-menu">Shop</h3>
        <div id="tea-div">
          <figure>
            <img class="tea" alt="tea" src="https://avatars.mds.yandex.net/i?id=37cdc381ee70c6bc81bbf2c15c229a9d_l-5222762-images-thumbs&n=33&w=1080&h=720&q=60">
            <figcaption>Green Tea</figcaption>
          </figure>
          <figure>
            <img class="tea" alt="tea" src="https://avatars.mds.yandex.net/i?id=79b789537b1a53e5529e7ab93ad2193a018b5449-12503309-images-thumbs&n=13">
            <figcaption>Black Tea</figcaption>
          </figure>
          <figure>
            <img class="tea" alt="tea" src="https://povarenka.net/wp-content/uploads/2018/08/Sorta-krasnogo-chaia-1.jpg">
            <figcaption>Red Tea</figcaption>
           </figure>
         </div>
      </section>
      <section id="delivery">
        <h3 class="main-menu">Delivery</h3>
        <p>How would you like to get your tea?</p>
        <input type="radio" id="pick" name="delivery">
        <label for="pick">I can pick my tea by myself</label><br>
        <input type="radio" id="send" name="delivery">
        <label for="send">I need delivery</label>
      </section>
      <section>
        <h4></h4>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <label for="email">Subscribe to our newsletter now!</label>
          <input type="email" id="email" name="email" placeholder="Enter your email here...">
          <input id="submit" type="submit">
        </form>
      </section>
    </main>
    <footer>
      <h6> 17495, 5th Avenue Street, New York, California</h6>
    </footer>
</html>
* {
  box-sizing: border-box;
  margin: 0; 
}

body {
  font-size: 16px;
}

main {
  background: linear-gradient(#f5deb3, #cd853f, #deb887);
  padding: 1vw; 
}

 #header > #head > #nav-div > #nav-bar {
  position: fixed;
  top: 0px;
 right: 3vw; 
}
  
h1,h4 {
  text-align: center;
}

.main-menu {
  text-align: center;
}

#header, footer{
  background-color: #deb887;
}

#header-img {
  border-radius: 50%;
  width: 25vw;
  height: 25vw;
  max-width: 500px;
  max-height: 500px;
}

#tea-div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: space-evenly;
}

.tea {
  width: 30vw;
  height: 30vw;
}

section:not(:last-of-type){
  margin: 10vh 0;
}

footer {
  height: 25vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1vw;
}

#video-div {
  display: flex;
  justify-content: center;
  border: 5vh;
}

.nav-link {
  color: #000000;
}

#head {
  display: flex;
  flex-direction: row;
  justify-content: space-between 
}

@media screen only and(max-width: 786px) {
  #video {
    width: 70vw;
    height: 30vh;
  }
}

@ilenia @hasanzaib1389 checked, corrected, still the same error. The thing is that the code works (I can see navigation bar fixed), but it doesn’t pass

You shouldn’t need all this. Try selecting just #nav-bar {}