¿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.
