Position menu on image with CSS

Question

Position menu on image with CSS

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

How to leave the menu fixed and about the background of image?

<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>

css

asked by anonymous 08.10.2018 / 15:54

2 answers

Returns value of an array dynamically Element overlapping the other CSS

score 2 · Answer 1

As in the order of your HTML the <img> tag comes before the <nav> tag, of course the Nav is already over the image, it does not need z-index . The menu you can set using position:fixed or position:sticky

Dry an example with exactly your HTML, I just used some CSS classes to look better.

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>

score 1 · Answer 2

Use position: fixed; in the css of your menu, it can be inline (in the code line) or external (separate file), follow the example with 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>

Now if you want to do external you can do this:

.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>

Now if you want something on top of everything, use css z-index: 9900; , z-index is priority order, the largest number will be on top. (is that in your question was insira o código aqui ).

Well that's it, anything let me know!