Cómo crear un menú flotante en mi tema de WooCommerce?

  • Autor Autor bewstars
  • Fecha de inicio Fecha de inicio
B

bewstars

No recomendado
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
como hacer hacer el navar/menu flotante en mi theme de woocomerce?,
 
como foro beta si bajas el menu baja y si subis el menu sube jajaj
 
@bewstars Entonces quieres decir un navegador fijado. Tienes una web o lo quieres saber por curiosidad?

Asignandole position:sticky o fixed, y top: 0 y left: 0 al navegador tiene que ir.

Te he dejado un ejemplo:

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
jsfiddle.net
 
No entendi, estoy haciendo una web y eso me sirve de ejemplo
 
bewstars dijo:
No entendi, estoy haciendo una web y eso me sirve de ejemplo
Hacer clic para expandir...

Que no entendistes? Usa el ejemplo si no. Mira principalmente el CSS asignado a .nav (tiene position:sticky)
 
esto como va a donde se añade?, un poco mas de ayuda
 
bewstars dijo:
esto como va a donde se añade?, un poco mas de ayuda
Hacer clic para expandir...

En el css de tu theme. Tienes que saber la Class o ID del bloque de tu menu. Vamos a decir que tu bloque de menu/navegador tiene asignado el ID "menu-nav".

Busca en el css por ese ID, y mira los valores CSS que tiene asignado. Vete probando y pon position: fixed o position: sticky.

Pero no trabajo con CMS
 
a ver te pongo lo que yo veo aca, yo aca tengo el menu completo usando el ff e inpsccionando elementos con la aplicacion del navegador, veo que esta ID:

 
de cierto modo tiene semejanza con el css tambien.

elemento {
}
#masthead {
 
Ok asi algo rapido:


CSS: 
#masthead {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

Esto lo aplicas al navegador. Pero claro, tienes que bajar el resto del contenido (margin-top). El siguiente bloque despues del navegador es la funcion de busqueda.

Tienes que saber el height del menu (con inspeccionar elemento te vale), y añades:

CSS: 
#search-bar-section {
    margin-top: 124px
}

Vete probando cosas, esto es solo para la version Desktop / PC. Tienes que asignar diferentes valores de margin-top para movil/tablet.
 
El primero quedo bien, solo le puse un poco de margen porque me lo cortaba al menu.
 
bewstars dijo:
El primero quedo bien, solo le puse un poco de margen porque me lo cortaba al menu.
Hacer clic para expandir...

Por eso te dije de asignar un margin-top al buscador, porque te lo corta 😀
 
sigo buscando las repsuestas de las demas ediciones que me faltan, gracias!, asi no pierdo tanto tiempo.
 
sabes que me dicuenta de que se corrio el menu, tiene 3 partes el menu, el logo, el menu de categorias y un icono con telefono y mail, esta dividido en 3 pedazos, pero se ensimo el logo pero por detras al le menu!
 
Hola @bewstars !

Si te referís a la cabecera fija, se puede hacer con .position:fixed o .position:sticky dependiendo de cómo esté maquetado tu sitio.

Por ejemplo, si tu cabecera tiene la clase header, podrías ponerle

Insertar CODE, HTML o PHP: 
.header {

position:fixed;

margin:0;

top:0;

z-index:99999;

width:100%;

}

Con eso debería andar
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

B
Crear un menú flotante en Elementor
Respuestas
3
Visitas
247
bypaya666
B
B
Agregar menú flotante en sitio web
Respuestas
1
Visitas
142
Carlos Arreola
C
Alinear menú flotante con barra de navegación
Respuestas
13
Visitas
312
Master1212
B
Cómo crear un menú con iconos para WooCommerce
Respuestas
8
Visitas
306
bewstars
B
A
Tema para woocommerce rápida y con buen seo?
Respuestas
1
Visitas
282
Khano
K
Menú
Acceder
Registro