Vertical menu disappearing underneath the footer

Question

Vertical menu disappearing underneath the footer

Navigation

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

4

On screens where the height is less than 600px the menu disappears below the footer. I also tried to leave position as fixed , relative and nothing, but the result was the same.

Follow the html of the 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>

The css:

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

An image of what's happening:

Howcanyousee"partners" is under the footer.

html css twitter-bootstrap

asked by anonymous 05.10.2015 / 23:14

3 answers

How to insert a watermark in PNG How to consume a WebService "asmx" via Jquery Ajax

score 2 · Answer 1

Leave the footer and menu in percentage height, this will make it work regardless of the screen resolution.

If the page does not have scroll, both elements can have position:absolute; , then just put a bottom:0; fofo, otherwise you can keep the footer with position:fixed; , so I put z-index in the example , which will make the menu overlap with the footer.

Obs. The higher the value of z-index , the greater the "layer" the element will be.

#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*/
}

Since I used height: 90%; in the menu, the footer should have height: 10%; , or less, to make everything work.

I hope I have helped.

score 1 · Answer 2

Maybe it should work fine as follows:

#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 ) }

Hugs

score 1 · Answer 3

Following the tips presented in this question I was able to solve my problem with the following code:

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

Thanks to all who helped!