Question

Como puedo hacer para que el menu horizontal y principal de mi pagina web no se descoloque al hacer scroll hacia abajo por los contenidos de la web? Creo recordar que deberia ser con la etiqueta position:fixed para que quede estático y no se altere sean cuales sean las dimensiones del cuerpo de la página pero no lo consigo.

El menu en cuestion es este y así queda con su respectivo CSS del menu que es este:

#menu ul
{   margin: 0px;
    padding: 0px;
}

#menu ul li{
    list-style: none;
    display: inline-block;
    padding: 25px 8px;
    margin-right: 60px;
    margin-left: 60px;
}

#menu ul li a{
    color: #FFF;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 25px 8px;
}

#menu ul li a:hover{
    background-color: #91B0AF;
    color: #000;
    font-weight: bold;
    padding: 25px 8px;
}

---

Si pongo la position fixed en el div completo del menu, la cosa queda así, se desajusta conforme a la imagen de fondo y se alinea a la izquierda :S

Gracias!!

Comments

¿Solucionaste el problema de tu menú?

Answer 1

Buenas.
Que es lo que quieres mantener el menu o toda la cabecera?

En principio con la etiqueta fixed deberia de quedar fijo en la posicion que le digas tomando como referencia el navegador.

Por si te sirve, aquí tienes un ejemplo de un menu posicionado a una distancia de la parte superior de X, que al hacer scroll se queda anclado y al volver vuelse a su sitio.

http://jsfiddle.net/adamb/F4BmP/

A mi parecer es un recurso sencillo y cómodo.

Espero que te sirva, un saludo.

Answer 2

Hola, efectivamente es con position:fixed y solo indicas la posicion del menu, pero te aconsejo mejor que lo hagas con JavaScript, aqui te dejo un link que me parece es lo que tu quieres hacer.

http://www.outyear.co.uk/smint/

Saludos

Answer 3

Buenas,

yo tengo un menú similar, que queda fijado a la izquierda, y lo hago de la siguiente manera:

                <ul id="navigation" style="position: absolute; z-index: 99; padding-top: 150px;">
                    <li class="usuarios" id="usuarios"><a title=""></a></li>
                    <li class="distribuidores" id="distribuidores"><a title=""></a></li>
                    <li class="embalajes" id="embalajes"><a title=""></a></li>
                    <li class="KLTs" id="KLTs"><a title=""></a></li>
                    <li class="movimientos" id="movimientos"><a title=""></a></li>
                    <li class="klt_distribuidor" id="klt_distribuidor"><a title=""></a></li>
                    <li class="periodo_klt" id="periodo_klt"><a title=""></a></li>
                </ul>

Esto hace que con el scroll se mantenga siempre en la misma posición verticalmente y sea visible todo el todo el rato.

Saludos!

Answer 4

#menu ul {
    position: fixed;
    top: 100px: // o lo que sea
}

Si lo que quieres es centrarlo horizontalmente, tendras que tener un tamaño del menu fijo y haces un left:50%

Y le das un margin-left negativo de la mitad del width del menu.

Saludos

Answer 5

Hola en base a alguna experiencia puedo decirte que rebicés la posicion del div de abajo y le des prioridad a el menu y su pocision luego coloques lo demas para poner el header fixed como quieres te puede servir esto talvez:
position: fixed;
top: 0;/ distancia a preferencia/
left: 0;
right: 0;
z-index: 1000;