Need help with Nav bar error-product landing page

HTML-CSS
1

I need help with my nav bar. Error says nav bar must remain in veiwport but I have my position fixed in header and still nothing. Here is what is have for code. I’m stuck, anything will help, thanks.

<html>
  <title id="title"> </title>
  <header id="header">
    <div class="logo">
         <img 
            id="header-img"   
              src="https://www.logodesignlove.com/images/monograms/tesla-symbol.jpg"
              alt="tesla logo"
              width="100"
              /> 
    </div>
    
    <nav id="nav-bar">
      <il><h1>
         <a class="nav-link" href=#whatisTesla?> what is Tesla?</a> &nbsp; &nbsp; &nbsp;
         <a class="nav-link" href=#Models> Models</a> &nbsp; &nbsp; &nbsp;
         <a class="nav-link" href="#Pricing"> Pricing</a> &nbsp; &nbsp; &nbsp;
        </h1></il>
    </nav>
  </header>
  
<body>
  
  <section id="whatisTesla?">
    </section>
  <div>
   <iframe  id="video" 
           width="560" 
           height="315" 
           src="https://www.youtube.com/embed/laW8rtUEMyc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  <section id="Models">
  </section>
  
  <section id="Pricing">
  </section>
  </body>
  <footer>
     <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input name="email" id="email" type="email" placeholder="Enter your email address" required/>
       <input id="submit" type="submit" value="Get Started" class="btn"></input>
  </form>
</section>
</footer>

          header {
positon: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
}

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:91.0) Gecko/20100101 Firefox/91.0

Challenge: Build a Product Landing Page

Link to the challenge:

2

sorry for the post looking like this i just copy and pasted from codepen.

3

I’ve edited your post 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

4

That’s not what the error message says.
It must have changed because it says something different now.

Also, you have some errors in your html that need fixing.

Run your code through the html validator

5

Navbar is fine (or you already fix the problem), you only have one error — Need to use flexbox at least once. I think that error is from “technical docs” project, re-check what test are you running from the FCC script. You should select “Product landing page”.

By the way you have some wrong tags in your html

<il> .......  </il>
6

I see the error now, I will start utilizing html validator, thank you.

7

thanks I just noticed after I posted that I figured out the nav bar issue but erased the flexbox in my header. I will change it now and should be good to go. Thanks.

1 Like
8

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