Keep getting assertion error about nav bar

Keep getting assertion error about nav bar
0

#1

Hello All:

I need help with an aserrtion error: AssertionError: #header or one of its children should be at the top of the viewport : expected 16 to be close to 0 +/- 15

I have used fixed position on everything I can think of that would related to the nav bar(maybe that it the mistake it is fixed while the page floats?) but i am not meeting the requirements to pass 15/16. Can anyone give me some direction.

Thanks,

Sean

cross posted in help


#2

So I see a fixed side menu but not a navbar…

You have have <nav> several times. you only need it once.

The ; goes after !important

Move the code to just under the Header tag opening tag.


#3

In your CSS you have lots of there lots of mistakes with punctuation. Missing ;

: when you should use ;

nav bar is an ID so in the CSS it needs to be #nav-bar


#4

You have li elements in your nav bar CSS. You need to put them on the li like this:

#nav-bar li {
display: inline-block;
			list-style-type: none;
}

#5

So I did all these things in your pen and it passed.

You’ll get there :slight_smile:


#6

I am working on the changes that you suggested. Thank youI am still not passing but working on it:)


#7

Need to take my daughter to work, I have tried to implement suggested changes and even removed blocks of css and still am not passing, lol. Got rid of the ul element in the htnl and ran the clickables across the top… Can you look again please? I would appreciate it:)


#8
<header id="header">
  <nav>  
    <nav id="nav-bar">
        <li><a class="nav-link" href="#hero">About</a></li>
        <li><a class="nav-link" href="#Features">Your Work</a></li>
        <li><a class="nav-link" href="#Team Member Input">Team Member Input</a></li>  

    <div class="menu-icon">
      <div class="menu">
        <img id="header-img"src="https://lh5.googleusercontent.com/p/AF1QipNQ3RQV5rhvbqZcBlOhRE5P0pDV55_TS5dwMtNX=w208-h168-p-k-no" alt="logo">

        </nav>                         
        </header>

        <section class="anchor" id="hero">
            <h1>We are the Industry Leader: We innovate, we deliver, and we warranty!</h1><br>
            <p>Here at Humble Sign Company we are not only concerned with the experience of our customers but also with the experience of our employees and our distributors.  This employee portal is a place for the company to put the next foot forward.  We continually invest in the company to make it Faster, Better, and More.  We want to hear your ideas, your accomplishments that might go unseen, and your concerns.  This is a portal to help drive the employee experience.  We want to continue to grow, and we want you to grow with us.  What are your ideas that would help drive productivity, increase standards and attract more clients?</p><br>

    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/aU6e33FYgg0?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    <section class="anchor" id="Features"> 
      <p class"video-text">Our team members are our best sign to the outside world.</p>
                 
    <div id="features" class="flex-container">
        <img class="feature-img"src="http://humblesignco.com/wp-content/uploads/2018/03/houston-post-oak-tower.jpg" alt="logo">         
    <div class="feature-text"> Our team members and their work are like diamonds in the sky!</h1>
        <h3>Team Member Input</h3>                    
        <p class="feature-text-bullet">We value your input and want to hear your thoughts and suggestions.  We want to create an environment where input is valued and used.  In order for us to do that we need to hear from you, hear your thoughts and your constructive value-added opinions.  This is not a place to complain, it is a place to grow together.</p>   

     <section class="anchor" id="Team Member Input">
        <form method="" action="https://www.freecodecamp.com/email-submit" id="form" name="form">
            <input type="email" id="email" name="email" placeholder="Enter your email"/>
            <input type="submit" id="submit" value="email address" />
        </form>
    </div>

This is your HTML code, make sure you code with constant indentation, so we can find out if we have not closed any tags and also it makes the code look tidy, now i have indented your code, and i could say there is a lot to clean up, you have not closed many tags, take your time clean it up and look further.


#9

Thank you, going to start going through it again, now.


#10

A good rule of thumb is when you first write an opening tag, go ahead and write the closing tag (if applicable) on the next line with the same indentation. That way, you won’t accidentally forget to close it later after you have possibly written many more lines of code.


#11

Thank you Randell. I will do that from now on.


#12

Thank you to everyone for your feedback. I moved the header id above the scriptsrc and it passed. I will apply what you have told me to my next page and go from there. My most sincere thanks for your time.

Sean