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

HTML-CSS
1

**Conte-nos o que está acontecendo:

" Your #nav-bar should always be at the top of the viewport" BRO… HOW I DO THIS TOPIC???**

**

Document 
<div class="nav">
  <nav id="nav-bar">
    <a class="nav-link" href="#analise">Análise</a>
    <a class="nav-link" href="#video">Especificações</a>
    <a class="nav-link" href="#preco">Preço</a>
  </nav>
</div>

Samsung Galaxy S22

lorem ipsum

aslkdhalksdj
img { width: 300px; }

body {
background-color: linear-gradient(115deg,rgba(255, 2, 2, 0.8),rgba(95, 156, 235, 0.7));
}

.video {
margin-top: 50px;
display: flex;
justify-content: center;
}

.logo1 {
display: flex;
justify-content: center;

}

.nav {
display: flex;
justify-content: center;

}

h2 {
text-align: center;
}

section {
text-align: center;
}

@media (max-width: 600px)
{
.facet_sidebar
{
display: none;
}
}

**

AVISO

O código de seed do desafio e/ou sua solução excederam o comprimento máximo que podemos transportar do desafio.

Você precisa realizar uma etapa adicional aqui para que o código que você escreveu apresente um formato de fácil leitura.

Copie e cole todo o código do editor mostrado no desafio de onde você acaba de fazer o link.

Substitua essas duas frases pelo código que você copiou.
Deixe as linhas com ``` acima e ``` abaixo de seu código,
pois elas permitirão a formatação adequada de seu código na publicação.

Informações de seu navegador:

Agente de usuário: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

Desafio: Criar uma landing page para um produto

Link para o desafio:

2

Hey there, and welcome to the forums :slightly_smiling_face:

When you post code, please format it by placing it between two rows of three backticks:

```
your code here
```

Might be worth taking a look at position: sticky; or position: fixed;:

3

I did not get it yet (:frowning:

4

its not helping, its site bug

1 Like
5

Could you share your code? Please format as described above by placing it between two rows of three backticks:
```
your code here
```

6

Yep, same problem here.
Heres the html:

        <header id="header">
          <div class="logo">
            <img
              id="header-img"
              src="direitoNotarial.png"
              alt="original trombones logo"
            /> <h2 class="direito">Direito Notarial e Registral</h2>
          </div>
  
          <nav id="nav-bar">
            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
              <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
          </nav>
        </header 
...

and here's the CSS

...
header {
  position: fixed;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
  }
}  
...
1 Like
7

The tests are checking the <nav> for positioning, not the <header>, so you need to set the positioning on the <nav>. Actually, you can have it on both if you want, but it needs to always be on the <nav>.

8

Already tried that… can’t get whats wrong

nav > ul {
    position: fixed;
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    background-color: #eee;
    min-height: 75px;
    align-items: center;
}
9

This is not targeting the <nav>, this is targeting the <ul> in the <nav>.

10

OMG, man! Thank you for all the help! After I sent the message I realised that I was targeting what wasn’t supposed to, but couldn’t figure out what I should’ve being targeting… After some struggle, I manage to figure it out.
I changed the box where this div was

                <img
                  id="header-img"
                  src="direitoNotarial.png"
                  alt=""
                /> <h2 class="direito">Direito Notarial e Registral</h2>
              </div>

and put it inside my nav-bar box, so it all became the same box.

Here’s the code:

          <nav id="nav-bar">
            <div class="logo">
                <img
                  id="header-img"
                  src="direitoNotarial.png"
                  alt=""
                /> <h2 class="direito">Direito Notarial e Registral</h2>
              </div>
            <ul>
              <li><a class="nav-link" href="#features">Features</a></li>
              <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
              <li><a class="nav-link" href="#pricing">Pricing</a></li>
            </ul>
          </nav>
        </header>

In CSS:

#nav-bar {
    position: fixed;
    top: 0;
    min-height: 75px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
    background-color: #eee;
}
11

after that did it start working, bcos ive just tried it, nothing change

1 Like
12

Good day, pls how do i make my nav-bar remain at the top of my viewport

13

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