Help with viewport problems in product landing

HTML-CSS
1

So i tried everything for the header to be always on top of the viewport. I’ve tried the most obvious way which is to use the position: fixed in the header. But that made the nav-bar goes to the left when its supposed to be on the right. So I improvised. And the nav-bar and image manage to stay on top. But why is the tester on codepen says that the nav-bar hasn’t stay on top.

header{
    position: relative;
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    z-index: 100;
}
#header-img{
   border-color: black;
   width: 30px;
   height: auto;
   z-index: 100;
   position: fixed;
  
}
#nav-bar{
   text-align: right;
    position: fixed;
    align-items: right;
    margin-left: 900px;


 <header id="header">
        <img id="header-img" 
        src="pen-bakery.png"/> 
        <nav id="nav-bar">
            <a class="nav-link" href="#bread">Breads</a> 
            <a class="nav-link" href="#made" >How Its Made</a> 
            <a class="nav-link" href="#price" >Price</a> 
        </nav>
    </header>

This is my project

2

Add this to the place #nav-bar → 

top: 0;

Now the FCC tests will pass :slight_smile:

3

Do what @Exotic said.

Then try to add target="_blank" to your <form id="form" action="https://www.freecodecamp.com/email-submit">.

Finally, add required tag to your <input id="email" name="email" type="email" placeholder="please enter a valid email">

4

Thank you so much for your help, kind stranger :smile:

5

Thank you for the advice :smile:

6

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