Help with viewport problems in product landing

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.

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

 <header id="header">
        <img id="header-img" 
        <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> 

This is my project

Add this to the place #nav-bar

top: 0;

Now the FCC tests will pass :slight_smile:

Do what @Exotic said.

Then try to add target="_blank" to your <form id="form" action="">.

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

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

Thank you for the advice :smile:

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