¿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
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:
- Sube las imágenes al apartado de Medios
- Copia la URL de la imagen que quieras añadir
- Pega la URL entre las “” -> img src=”AQUÍ”
- 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.