CSS - Menu responsivo

[thiagosvl]

Boa noite!

Estou tendo problemas com meu menu responsivo, uma vez que ele funciona ao clicar - e isso inclui o drop-down -. O erro fica por conta de que metade do menu é "ocultado" pelo conteudo das seguintes div's: div#container, um H3 e a div conteudo.

 

Segue o CSS do MENU:

1. 
   

   
   
   header#menuCelular {
   
   height:40px;
   
   color:#fff;
   
   width:100%;
   
   background-color:#0260a9;
   
   display:none;
   
   }
   
   
   #btn-menu {
   
   display:none;
   
   }
   
   /* background-color:#0260a9; */
   
   .menuMobile ul {
   
   background-color:#0260a9;
   
   display:flex;
   
   border-top:1px solid white;
   
   }
   
   .menuMobile ul ul {
   
   display:none;
   
   }
   
   .menuMobile a {
   
   display:block;
   
   padding:15px 0px;
   
   text-align:center;
   
   color:#fff;
   
   }
   
   .menuMobile a:hover {
   
   background: rgba(0,0,0,0.3);
   
   }
   
   .menuMobile ul li:hover ul {
   
   display:block;
   
   position:absolute;
   
   }
   
   
   @[member="MEDIA"] (max-width:976px) {
   
   header#menuCelular {
   
   display:block;
   
   position:fixed;
   
   }
   
   header#menuCelular label#icon-menu {
   
   font-size:1.6em;
   
   cursor:pointer;
   
   display:block;
   
   height:100%;
   
   width:40px;
   
   padding:7px 1px;
   
   border-right:1px solid white;
   
   }
   
   header#menuCelular label#icon-seta {
   
   font-size:1em;
   
   right:5px;
   
   position:absolute;
   
   cursor:pointer;
   
   }
   
   .menuMobile {
   
   width:65%;
   
   transform: translateY(-130%);
   
   transition:all 0.3s;
   
   }
   
   /* background-color:#0260a9; */
   
   .menuMobile ul {
   
   display:block;
   
   background:#0260a9;
   
   height:100%;
   
   }
   
   .menuMobile ul li {
   
   border-bottom:1px solid white;
   
   }
   
   .menuMobile ul li:hover ul {
   
   display:none;
   
   position:static;
   
   }
   
   #btn-menu:checked ~ .menuMobile {
   
   transform: translateX(0%);
   
   }
   
   .menuMobile ul ul {
   
   background-color:#1874CD;
   
   }
   
   .menuMobile ul ul a {
   
   padding:15px 35px;
   
   text-align:center;
   
   }
   
   } 

   
   
   

SEGUE CSS das DIVS:

1. 
   

   
   
   section#container {
   
   margin-top:0;
   
   margin:0;
   
   border:0;
   
   }
   
   h3.titulo-container-esquerdo {
   
   border-radius:0;
   
   background-color:#0260a9;
   
   }
   
   section#container article#conteudo {
   
   width:100%;
   
   text-align:justify;
   
   position:relative;
   
   margin:0;
   
   float:none;
   
   background-color:transparent;
   
   border:0;
   
   margin-top:0.450em;
   
   min-height:16em;
   
   }
   

   
   
   

[FabianoS]

@thiagosvl isso se resolveria facilmente com o "z-index".

 

Veja que adicionei um posicionamento relativo pra o header e o z-index e funcionou perfeitamente.

 

 

 

A propósito site muito bem estilizado parabéns.

[thiagosvl]

Olá @FanianoS

Obrigado pelo elogio! Esse é o primeiro projeto que eu crio, então to criando e aprendendo ao mesmo tempo..

Eu já tinha visto algo com z-index, mas nunca foi a fundo para entender.

Amanha verei o código novamente e tomarei as medidas cabíveis!

Mais uma vez obrigado e boa noite!

[thiagosvl]

Agradeço a atenção, pois testei e funcionou!

 

Pelo que entendi,a ideia do 'z-index' é distribuir a ordem em que os elementos irão aparecer?

 

Uma outra dúvida quanto ao menu: eu adicionei um position:fixed no header#menuCelular para ele acompanhar todo o scroll do site. Até ai tudo bem, o problema é que se a pessoa clicar nos sub-menu's, o scroll do site não acompanha, pois os <li> também ficam fixos. A unica forma que eu consegui arrumar foi tirando o position:fixed, mas o menu já não acompanha mais o scroll da pagina.

Alguma dica quanto a isso?

Mais uma vez, obrigado.

[FabianoS]

 

 

Pelo que entendi,a ideia do 'z-index' é distribuir a ordem em que os elementos irão aparecer?

Sim, uma div com maior numero está sempre na frente de uma div com numero menor.

 

 

 

Uma outra dúvida quanto ao menu: eu adicionei um position:fixed no header#menuCelular para ele acompanhar todo o scroll do site. Até ai tudo bem, o problema é que se a pessoa clicar nos sub-menu's, o scroll do site não acompanha, pois os <li> também ficam fixo. A unica forma que eu consegui arrumar foi tirando o position:fixed, mas o menu já não acompanha mais o scroll da pagina.

 

No site está normal, acompanhando.

[thiagosvl]

@FabianoS 

Pra falar a verdade não está acompanhando, da uma olhada lá.

Como o menu está com fixed, o conteudo deveria criar um scroll conforme a quantidade de <li> que aparecessem..

 

Segue a linha com o código fixo:

header#menuCelular {    display:block;    position: fixed;}

 

Caso eu continue rolando a pagina, o menu nao acompanha, só exibe as LI presente no viewport.

[FabianoS]

@thiagovl é realmente vai ocultar caso expandir, o que você pode fazer e se o usuário clicar em outro "<li>" o li ja clicado voltaria a posição que estava.

 

fora isso não sei como. 

[thiagosvl]

Mas no caso isso seria feito com javascript ou css mesmo?

 

Engraçado é que se eu deixar o menu no topo com position:relative ele não cria esse problema, pois o viewport cria o scroll automaticamente, agora com position:fixed os <li> também ficam fixos, mesmo eu adicionando position relative..

 

O menu preso lá no topo é legal, mas se ele pudesse acompanhar o scroll da pagina seria ótimo!

[FabianoS]

Mas no caso isso seria feito com javascript ou css mesmo?

 

Seria com jquery.