4

Em telas onde a altura é menor que 600px o menu passa a sumir por baixo do rodapé. Também tentei deixar a position como fixed, relative e sem nada porém o resultado foi o mesmo.

Segue o html do menu:

<div class="container-fluid">
  <div class="hidden-xs hidden-sm " id="menuwraper">
    <div id="menu" class="hidden-xs ">
        <ul id="navegacao">
            <li>
                <a href="home"><img src="imagensite/logo.png" /></a>
            </li>
            <li class="efeito"><a href="sobre">SOBRE NÓS</a></li>
            <li class="efeito"><a href="projetos">PROJETOS</a></li>
            <li class="efeito"><a href="noticias">NOVIDADES</a></li>
            <li class="efeito"><a href="contato">CONTATO</a></li>
            <li class="efeito"><a href="parceiros">PARCEIROS</a></li>
        </ul>
    </div>
</div>

O css:

#menu {
  height: 400px;
  position:absolute;
  margin-top:31px;
  width: 15%;
  margin-bottom:140px;
}

Uma imagem do que está acontecendo:

imagem

Como vocês podem vero "parceiros" está embaixo do rodapé.

5
  • 1
    Você está usando pixels nos comandos eles geralmente não se adaptam a diferentes resoluções, tente usar porcentagem. Commented 5/10/2015 às 21:54
  • Tentei isso porém continua acontecendo o mesmo,queria deixar o position como fixed... Commented 5/10/2015 às 22:05
  • 1
    Você quer apenas redimensionar o menu ou que ele fique acima do rodapé?
    – Randrade
    Commented 6/10/2015 às 12:37
  • Redimensionar.. Commented 6/10/2015 às 13:27
  • 1
    Coloca no MENU z-index: 10. Commented 6/10/2015 às 14:01

3 Respostas 3

2

Deixe o rodapé e o menu com altura em porcentagem, isso fará com que funcione independente da resolução da tela.

Caso a página não vá ter scroll, ambos os elementos podem ter position:absolute;, ai é só colocar um bottom:0; pro rodapé, senão pode manter o rodapé com position:fixed;, para isso coloquei o z-index no exemplo, que fará com que o menu se sobreponha ao rodapé.

Obs. Quanto maior o valor de z-index, maior a "camada" que o elemento ficará.

#menu {
  height: 90%; /*Pode ser outro valor, esse é só um exemplo*/
  position:absolute;
  margin-top:31px;
  width: 15%;
  margin-bottom:140px;
  z-index:5000; /*Isso é para que ele se sobreponha ao rodape caso necessario*/
}

Como usei height: 90%; no menu, o rodapé deveria ficar com height: 10%;, ou menos, para que tudo funcione.

Espero ter ajudado.

3
  • Tentei dessa forma porém mesmo assim ele continua desaparecendo,não tem uma forma de que apareça uma barra de rolagem na lateral para mostrar ele?Assim como acontece com o contéudo... Commented 7/10/2015 às 20:21
  • Só uma pergunta, a página precisa ser sem scroll? Commented 8/10/2015 às 13:58
  • acabei de checar e realmente o erro continua. Para solucionar, mantenha o código que mandei e acrescente ao menu a propriedade overflow:auto, dessa forma ele mostrará a barra de rolagem somente quando necessário, se precisar mando exemplo. Commented 8/10/2015 às 14:46
1

Talvez pode dar certo colocar da seguinte forma:

#menu { position:absolute; height:0; width: 15%; top: auto; bottom: 0; left: 0; right: auto; margin-top: 2%; margin-bottom:5%; padding-bottom: 30%; ( aumenta até achar a altura certa ) }

Abraços

1

Seguindo as dicas apresentadas nessa pergunta consegui resolver meu problema com o seguinte código:

margin-top:30px;
width: 15%;
position:absolute;
height: auto;
margin-bottom: 10%;
padding-bottom: 3%;

Grato a todos que ajudaram!

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 .