Soporte » Diseño – Temas y plantillas » Fijar «Header Bottom» en versión ordenador

  • Resuelto azulejosonlineelchollo

    (@azulejosonlineelchollo)


    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)
  • 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 4 semanas, 1 día por Alvaro Torres.
    Iniciador del debate azulejosonlineelchollo

    (@azulejosonlineelchollo)

    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

    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)

    Gracias Álvaro,

    lo marco como resuelto

    saludos!

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.