Mega Menu WordPress para principiantes
Hola!, hoy vamos a ver como crear un megamenu para tu web sin plugins y solamente con código CSS.
En el video anterior te mostre como poner menús en wordpress y woocommerce como se configuraban, hoy vamos a ver como crear un megamenú sencillo sin plugins.
Si has visto el video anterior te acordarás que teniamos el menú vertical y si no has visto el video te lo dejo en la descripción del video. Solamente vamos a utilizar código CSS el mismo que te enseño aquí y que te dejaré en un enlace más abajo.
///////CLASE PARA MEGAMENU///////
mega-menu2
//////////////////////////////
/////CODIGO PARA MEGAMENU/////////
@media (min-width: 769px) {
nav .main-nav .mega-menu2 {
position: static;
}
nav .main-nav .mega-menu2 > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
}
nav .main-nav .mega-menu2 > ul > li > a {
font-weight: normal;
}
nav .main-nav .mega-menu2>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu2.mega-menu2-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu2.mega-menu2-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu2.mega-menu2-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu2 > ul > li:hover > a,
nav .main-nav .mega-menu2 > ul > li:focus > a,
nav .main-nav .mega-menu2 > ul > li[class*=»current-«] > a,
nav .main-nav .mega-menu2 ul ul {
background-color: transparent !important;
color: inherit;
}
nav .main-nav .mega-menu2 ul .sub-menu {
position: static;
display: block;
opacity: 1;
visibility: visible;
width: 100%;
box-shadow: 0 0 0;
left: 0;
height: auto;
}
nav .main-nav .mega-menu2 ul.toggled-on .sub-menu {
pointer-events: auto;
}
nav .main-nav .mega-menu2 .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
}
/////////FIN CODIGO MEGAMENU///////////////////////////////////////
//////////ITEM DESTACADO DEL MENU/////////////////
.custom-menu-label.menu-item > a::after {
width: auto;
height: auto;
transform: none;
color: rgb(255, 255, 255);
background-color: rgb(66, 220, 10);
padding-right: 8px;
padding-left: 8px;
margin-left: 6px;
border-radius: 0px;
content: «Best Price»;
border: none;
font-size:14px
}
////////////////fIN DEL CODIGO DESTACADO/////////////////////
Sumate y forma parte de mi canal de Youtube!
Todas las semanas comparto vídeos, tutoriales, consejos y respondo a todos los comentarios y dudas de la comunidad.
