Saltar al contenido

Mega Menu

¿Quieres un Mega Menú como el de ésta web? ¿Que muestre tus resultados en horizontal?¿Con imágenes? ¡Simple, fácil y rápido! Vamos a ello….

Mega Menu de Imágenes en Orbital Theme

Con éste rápido TIP podrás dar un estilo genial a tus Webs, tanto para formato escritorio como sobre todo para móvil… ¡con el Orbital Menu queda de fábula!

Mega Menu

/* MEGA MENU EN ORBITAL */
.site-header {
border-bottom: solid 2px #dab100; /* ELEGIR COLOR*/
}
@media (min-width: 64rem){
.site-navbar .sub-menu li {
display: table-cell;
}
}
.site-navbar .menu-item-has-children a {
padding-right: 1.8rem!important;
}
@media (min-width: 1040px){
.site-navbar.site-navbar-right .sub-menu {
right: auto;
left: -15rem;
}
}
@media (min-width: 1040px){
.site-navbar .sub-menu {
border: 2px solid #dab100; /*ELEGIR COLOR*/
}
}
@media (min-width: 1040px){
.site-navbar .sub-menu li:hover {
background-color: #ffdf5a;/*ELEGIR COLOR*/
}
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
}
.menucentrado {
text-align:center;
width: auto;
}

Recursos para Imágenes Gratis

Puedes descargar Imágenes en formato sin fondo (png o vectores como svg) con licencias gratuítas desde y tipo iconos:

Insertar Imágenes en el Menú

El tamaño recomendado es de hasta 64 x 64 px , por lo que tened en cuenta el escalar vuestras imágenes, ¡vamos al lío!

Código HTML Menús

<img src="https://tuweb/wp-content/uploads/tufoto.png" class="center"></img><p class="menucentrado">TU_TITULO</p>

NOTA: sustituir la URL por la de tu imagen

¿Cómo hacer mi menú?

Debes de crear un menú principal con al menos un nivel superior y un subnivel como se muestra en el vídeo y seguir los siguientes pasos:

  1. Sube las imágenes al apartado de Medios
  2. Copia la URL de la imagen que quieras añadir
  3. Pega la URL entre las “” -> img src=”AQUÍ”
  4. Escribe el Título del Menú antes del cierre: < / p >

Mega Menu de Listas en Orbital Theme

Estilo de Mega Menú exclusivo para versiones de escritorio donde podrás personalizar el mega menú de tu web para obtener varias columnas y personalizar un poco más tu menú.

Mega Menu Listas

/* MEGA MENU  LISTAS EN ORBITAL */
@media (min-width: 1040px){
.site-navbar .sub-menu li a {
width: 100%;
color: black;
padding: 0.7rem;
}
.site-navbar .sub-menu li {
display: inline-block;
width: 11rem;
}
.site-navbar.site-navbar-right .sub-menu {
right: auto;
left: -13.8rem;
columns: 2;
border: 2px solid red;
}
.site-navbar .sub-menu li a:hover {
background:red;
}
}

Escoger Colores

Elige los colores con la siguiente herramienta:

    • Optimizado para Gutenberg
    • Soporte ilimitado
    • Monetiza tu WEB
    • Mejora los Rankings en Google
    • Actualizaciones de por vida

    Últimas Novedades de nuestro Blog

    Mira los artículos de nuestro Blog con los mejores consejos tras la experiencia de uso del Tema Orbital enfocado a SEO y posicionamiento.

    Página creada por FernanTEC - ¿Quieres saber más?