Your #nav-bar should always be at the top of the viewport

link to my cod :

i have use position fixed. nav bar stey at top. but i get same eror wen i run the cod

Pleas help me !

Hi @Bcube1 !
Can you share your code with us?

What you seen in the console when you submit your project?

Hi thank you for your interest.
Do link to cod do not work ? For me send go to my coding page.

No, we can’t see your code just using the link. You will have to post it.


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 (').

I can’t go to your challenge, until you pos it here.

Hi thanks for understanding.
My problem is:
Oane request of Build a Product Landing Page is " Your #nav-bar should always be at the top of the viewport. ’

My html :

<header id='header'>
      <nav id='nav-bar'>
        <ul>
          <li><a href='#contact' class ='nav-link' >Contact us</a></li>
          <li><a href='#services' class ='nav-link'>Our services</a></li>
          <li><a href='#restore' class ='nav-link' >Restored voilin</a></li>
          <li><a href='#price' class ='nav-link'>Our price</a><li>
        </ul>
      </nav>
      <img id='header-img' src='https://live.staticflickr.com/3312/3226375271_9998ac7530_b.jpg'>
      <h2 class='name-logo'>Originals voilin</h2>
    </header>

my css :

#header {
    display: flex;
    width: 100%;
    height: 10vh;
    background-color: gray;
    position: fixed;
    top: 0;
    left: 0;
  }
  #header-img{
    height: 100%;
  }
  .name-logo {
  margin: auto 0;
  font-size: clamp(10px, 3vw, 35px);
  padding-bottom: 20px;
  white-space: nowrap;
  }
  
  #nav-bar {
    width: 100%;

  }
  ul {
    display: flex;
    justify-content: space-around;
    gap: 5px;
    list-style: none;
    /* align-items: center; */
    margin: 0;
  }
  .nav-link {
    background-color: red;
    text-decoration: none;
    color: black;
    display: table-cell;
    vertical-align: middle;
    font-size: 3vw;
  }

When i do Run The Test i get that the challenge to have my nav-bar all time of top is not verified.

As u can se i have use position: fixed whit top: 0 left: 0
And on editor nav-bar do stey all time on top of page.

I do not understand what i do wrong.
Pleas help me !

Thank you for u interest.

In the navbar id selector you need to position property with the value fixed and top property value 0. Also you need closing face } bracket in css for navbar.
I hope you understand
@Bcube1

Hi thanks for u fast answer.
The missing } was mistake from my part when editing.
I have tray u suggestion, it did not work.

So i have delete all my SCC cod and started from 0. Now is working , i think was double coding/conflict of code .

Thanks for u interest.

1 Like

Your welcome. Yeah! Right. That was code mixup issue.