1

Como deixar o menu fixo e sobre o background de imagem?

<hearder>
  <img src="imgs/principal.jpg" alt="estilo">
  <nav id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Consultoria de imagem</a></li>
      <li><a href="#">Outros Serviços</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>
  <p>Valorize sua essencia, crie sua melhor versão!</p>
</hearder>

2 Respostas 2

2

Como na ordem do seu HTML a tag <img> vêm antes da tag <nav> naturalmente a Nav já fica por cima da imagem, não precisa de z-index. Já o menu vc pode fixar usando position:fixed ou position:sticky

Seque um exemplo com exatamente o seu HTML, apenas usei umas classes CSS para ficar melhor apresentado.

body {
  margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    top: 0;
    width: 100%;
    position: fixed; 
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: red;
}

header img {
  height: 200px;
  width: 100%;
}
<header>
    <img src="https://placecage.com/100/100" alt="estilo">
    <nav id="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Consultoria de imagem</a></li>
        <li><a href="#">Outros Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
    <p>Valorize sua essencia, crie sua melhor versão!</p>
</header>

<div style="height:2000px; width:100px">
</div>

1

Use position: fixed; no css do seu menu, pode ser inline (na linha do código) ou externo (arquivo separado), segue o exemplo com o css inline:

<header style="position: fixed;">
        <img src="imgs/principal.jpg" alt="estilo">
        <nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Consultoria de imagem</a></li>
        <li><a href="#">Outros Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</header>

agora se quiser fazer externo pode fazer assim:

.menu {
  position: fixed;
}
<header class="menu">
        <img src="imgs/principal.jpg" alt="estilo">
        <nav id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Consultoria de imagem</a></li>
        <li><a href="#">Outros Serviços</a></li>
        <li><a href="#">Sobre</a></li>
        <li><a href="#">Contato</a></li>
    </ul>
</header>

Agora se você quer algo por cima de tudo, use no css z-index: 9900;, o z-index é ordem de prioridade, o maior número estará por cima. (é que na sua pergunta ficou insira o código aqui).

Bem é isso, qualquer coisa me avise!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .