Menu estático al bajar scroll en HTML ?

AvkZ

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!!

alterego

Al contenedor del menú, a parte de position: fixed tienes que posicionarlo con top/left/right.
Luego al contenedor del contenido tienes que darle un margen superior igual o mayor al alto del contenedor del menú, para que se sitúe debajo y no detrás.

Ejemplo -> http://jsfiddle.net/EYEL2/

1 respuesta
sh31k

#1 es lo que dice #2, aunque tb puedes usar z-index:

http://www.w3schools.com/cssref/pr_pos_z-index.asp

Usuarios habituales

  • sh31k
  • alterego
  • AvkZ