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

HTML-CSS
1

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 !

2

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

3

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

4

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

5

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.

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

6

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

7

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.

8

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

9

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
10

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

11

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