Barra de menú fija en el tema Halcyonic (CSS)

How can modify CSS code to make the top header stay fixed so when I scroll up it stays fixed with a neat shadow? If you resize and look at the mobile responsive version you see what I mean.

Mira aquí: http://html5up.net/uploads/demos/halcyonic/twocolumn1.html

The code is downloadable here: http://html5up.net/halcyonic/download

Muchas Gracias

preguntado el 12 de junio de 14 a las 10:06

Questions seeking debugging help (“why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it en la pregunta misma. Ver: Cómo crear un ejemplo mínimo, completo y verificable, Algo en mi sitio web no funciona. ¿Puedo pegarle un enlace? e SSCCE. -

I would do this and have provided a link to all the code. I just don't know where to start?! -

3 Respuestas

You have some element style on the parent div:

<div id="skel-panels-pageWrapper" style="position: relative; left: 0px; right: 0px; top: 0px; -webkit-backface-visibility: hidden; -webkit-perspective: 500; -webkit-transition: -webkit-transform 0.25s ease-in-out; transition: -webkit-transform 0.25s ease-in-out;" >

This inline style is stopping it from working for some reason. If you remove -webkit-perspective: 500; the following CSS should work.

#header-wrapper{
   position:fixed;
   width:100%;
   top:0px;
}

Respondido el 12 de junio de 14 a las 11:06

#header-wrapper{
   position:fixed;
   width:100%;
   top:0;
   right:0;
   left:0;
}

Should do it...but its not happening.. i Tried on the site. May be some javascript function is interferring!!!

Respondido el 12 de junio de 14 a las 10:06

Thanks, that is what I am trying to figure out as well. - marcus silverman

@dafmeister answer is right... if you can remove -webkit-perspective from the parent element the above css should work fine. If you/ theme is not using any sort of css 3d transforms then you can remove this property without anything breaking. - bhavya_w

You need to add the following codes to #header-wrapper css:

#header-wrapper{ position:fixed; width:100% }

And add the following to the css file:

#content-wrapper #content{margin-top:155px;}

Respondido el 12 de junio de 14 a las 10:06

I really appreciate the help, but still not working. Really puzzled by this. - marcus silverman

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.