Menu position fixed

28/04/2020

0

CSS

Eu tenho um menu fixo com position fixed, mas os conteúdos abaixo, quando rolo o scroll passa por cima do menu, como corrigir:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="home.css"/>
    <title>Document</title>
    <style>

* {
    Padding: 0px;
    Margin: 0px;
}
body{
    margin:  0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}
h1, p, a{
    color: #494949;
    font-family: sans-serif ;
    font-size: 24px;
}

nav.menubar{
    width: 100%;
    background: #137277;
    position: fixed; 
    top: 0;
    overflow: hidden;

}
ul{
   width: 80%;    /* A linha esta ocupando 80% de largura em relação a nav */
   margin: 0 auto;
   padding: 0;
}
ul li{
   list-style: none;
   display: inline-block;
   padding: 20px;
}

ul li:hover{
   background: #e91e63;
}
ul li a {
   color: #fff;
   font-size: 18px;
   text-decoration: none;
}
.botao:hover {
   background-color: rgba(52, 152, 219, 1.0);
  /* background: #137277; */
   box-shadow: 0px 0px 10px gray;
}
.toggle{
   width: 100%;
   padding:  10px 20px;
   text-align: right;
   box-sizing: border-box;
   color: #fff;
   font-size: 30px;
   display: none;
}
.container{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    /* background: red; */
}
.container .slider{
    position: absolute;
    top: 6%; 
    left: 0;
    background: blue;
    width: 500%;
    height: 100%;
    animation:  animate 10s linear infinite;
 }
.container .slider .slide 
{
    position: relative;
    width: 20%;
    height: 100%;
    float: left;
    background: rgb(243, 9, 9);
}
.container .slider .slide .caption
{
    position: absolute;
    bottom: 60px;
    left: 60px;
    right: 60px;
    padding: 30px;
    box-sizing: border-box;
    background: rgb(243, 9, 9);
}
.container .slider .slide .caption h2{
    margin: 0 0 20px;
    padding: 0;
    font-size: 48px;
    color:#fff;
}
.container .slider .slide .caption p{
    
    bottom: 60px;
    left: 60px;
    right: 60px;
   
    margin: 0;
    padding: 0px;
    font-size: 18px;
    color:#fff;
    box-sizing: border-box;
}
.container .slider .slide.slider1{
 background: grey;
 background-size: cover;
 background-position: center;
}
.container .slider .slide.slider2{
    background: magenta;
    background-size: cover;
    background-position: center;
   }
      .container .slider .slide.slider3{
    background:mediumslateblue;
    background-size: cover;
    background-position: center;
   }
   .container .slider .slide.slider4{
    background: orange;
    background-size: cover;
    background-position: center;
   }
   .container .slider .slide.slider5{
    background: palegreen;
    background-size: cover;
    background-position: center;
   }
   @keyframes animate
   {
       0% {  left: 0;  }
       20%{ left: 0;  }

       25% { left: -100%; }

       45% { left: -100%;  }

       50% { left: -200%; }

       70% { left: -200%; }

       75% { left: -300%; }

       75% { left: -300%; }

       95%  {left: -300%; }

       100%   {left: -400%;}
   }
article.conteudo
{
    position: relative;
    padding: 30px;
    top: 860px;
   
}
@media (max-width:768px)
{
    .toggle{
        display: block;
    }

    ul 
    {
        width: 100%; /* agora ira ocupar 100% da largura da nav*/
        display: none;
    }
    ul li 
    {
        display: block;
        text-align: center;
    }
    .active
    {
        display: block;
    }
 }
     </style>
</head>
<body>
  <div class="container">
    <nav class="menubar"> <!--  #headerAlguns chamam de header-->
      <div class="toggle">
        <i class="fa fa-bars menu" aria-hidden="true"></i>
      </div>
        <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#sobre">Sobre</a></li>
        <li><a href="#servico">Serviço</a></li>
        <li><a href="#blog">Blog</a></li>
        <li><a href="#contato">Contato</a></li>
      </ul>
   </nav>
    <div class="slider">
            <div class="slide slider1">
          <div class="caption">
            <h2>Slider 1</h2>
            <p>
              Texto 1
            </p>
          </div>
      </div> <!--slide-->
        <div class="slide slider2">
        <div class="caption">
          <h2>Slider 2</h2>
          <p>
            Texto 2
          </p>
        </div>
      </div> <!--slide-->
        <div class="slide slider3">
          <div class="caption">
            <h2>Slider 3</h2>
            <p>
              Texto 3
            </p>
          </div>
      </div> <!--slide-->
        <div class="slide slider4">
          <div class="caption">
            <h2>Slider 4</h2>
            <p>
              Texto 4
            </p>
          </div>
      </div><!--slide-->
  
      <div class="slide slider5">
        <div class="caption">
          <h2>Slider 5</h2>
          <p>
            Texto 5
          </p>
        </div>
      </div><!--slide-->
  
    </div> <!--slider-->
  </div> <!--container-->
     <section class="artigos">

      <article class="conteudo">
      <h1>The standard Lorem Ipsum passage, used since the 1500s</h1>
  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>    
  
    <article class="conteudo">  
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article> 
  
    <article class="conteudo"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>
  
    <article class="conteudo"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </article>

  </section>
 </body>
</html>
Abmael Ferreira

Abmael Ferreira

Responder

Post mais votado

28/04/2020

Boa noite, tudo bem?

Ao meu ver, o que está ocorrendo é que o conteúdo dos slides, estão passando por cima do seu menu. Tente utilizar a propriedade z-index para fazer com que o menu sempre fique em cima dos elementos.

https://www.devmedia.com.br/css-z-index-entendendo-sobre-o-eixo-z-na-web/28698

Giuliano

Giuliano
Responder
Gostei + 1

Mais Posts

29/04/2020

Abmael Ferreira

Bom dia tudo bem, valeu Giuliano, foi na mosca, muitíssimo obrigado, vou continuar meus estudos.
Responder
Gostei + 0

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar