Fijar «Header Bottom» en versión ordenador

  • Resuelto azulejosonlineelchollo

    (@azulejosonlineelchollo)


    hace 1 año, 5 meses

    Buenas tardes,

    me gustaría fijar el «Header Bottom» en versión ordenador para que cuando el cliente baje por mi página el menú se mantenga en la parte superior.
    ¿Hay alguna forma de añadir en la parte de CSS adicional algín código para que esto funcione?

    Nota: Solo quiero que pase en la versión ordenador. Las versiones tablet y móvil me gustan como están con lo que no quiero que se vean modificadas.

    Muchas gracias!

    saludos

    Luis

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Alvaro Torres

    (@algato333)

    hace 1 año, 5 meses

    Hola @azulejosonlineelchollo,

    Para lo que estás buscando necesitarás añadir el siguiente código:

    .header-bottom{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

    Y claro, en este caso, para que afecte solo a la versión desktop tendrás que usar media queries a partir de 1025px

    Espero haberte ayudado, saludos

    • Esta respuesta fue modificada hace 1 año, 5 meses por Alvaro Torres.
    Iniciador del debate azulejosonlineelchollo

    (@azulejosonlineelchollo)

    hace 1 año, 5 meses

    Hola Álvaro,

    gracias por contestar. No acaba de funcionar como me esperaba ya que como podrás ver inicialmente el menú no esta en la parte superior, con lo que únicamente tiene que quedarse en la parte superior una vez llegues a él. Tipo como la funcionalidad Sticky

    muchas gracias,

    un saludo!

    Luis Blasco

    Alvaro Torres

    (@algato333)

    hace 1 año, 5 meses

    Hola @azulejosonlineelchollo,

    Sospechaba que en realidad querías usar sticky en lugar de fixed. Pero no propuse esa solución porque no lo entendí así inicialmente.

    Entiendo que quieres que el elemento header-bottom, estando inicialmente más abajo, quede pegado al borde superior una vez hagas scroll. Bien, pues estás en lo cierto, lo puedes hacer a través de la declaración sticky. Lo que ocurre en tu web es que la estructura HTML no es la apropiada, deberías colocar el elemento sticky al mismo nivel que el resto de los elementos de la página. Es decir, el elemento #masthead podría ser sticky o sacar header-bottom a su nivel.

    Espero haberme explicaod correctamente esta vez
    🙂

    Iniciador del debate azulejosonlineelchollo

    (@azulejosonlineelchollo)

    hace 1 año, 5 meses

    Gracias Álvaro,

    lo marco como resuelto

    saludos!

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • El debate ‘Fijar «Header Bottom» en versión ordenador’ está cerrado a nuevas respuestas.