Custom classes override

Hi santifri,

Can you post the CSS you’ve written so I can see how you achieved that styling on your theme menu?

If you don’t want to use !important, you’ll need to update your selectors so that they are as specific, or more specific, then the selectors that MMM is using to apply styling to those elements (MMM uses very specific selectors to give it the best chance of overriding any styling that the theme is attempting to apply to the menu).

Regards,
Tom

Of course:
/* MEGA MENU */
.mmLink {
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 158px;
}
#cshero-header .main-navigation .menu-main-menu li li.mmLink a {
height: 100%;
}
#cshero-header .main-navigation .menu-main-menu li li.current-menu-item > a {
background-color: transparent;
}
#cshero-header .main-navigation .menu-main-menu li li.mmLink a:hover,
#cshero-header .main-navigation .menu-main-menu li li.mmLink a:focus,
.fixed-big#cshero-header .main-navigation .menu-main-menu li li.current-menu-item > a {
background-color: rgba(255,255,255,0.33);
}
.mfp-close:hover,
.mfp-close:focus {
background-color: transparent;
}
#cshero-header .main-navigation .menu-main-menu li li.mmLink a span {
display: inline-block;
padding: 0;
margin: 20px;
border-bottom: 4px solid transparent;
-webkit-transition: border-color 200ms linear;
-moz-transition: border-color 200ms linear;
-ms-transition: border-color 200ms linear;
-o-transition: border-color 200ms linear;
transition: border-color 200ms linear;
}
#cshero-header .main-navigation .menu-main-menu li li.mmLink a:hover span,
#cshero-header .main-navigation .menu-main-menu li li.mmLink a:focus span {
border-color: #C1272D;
}
.mm-a1 {
background-image: url(../../images/menu/a1.png);
background-image:url(../../images/menu/A1_miniatura.png);
}
.mm-a3 {
background-image: url(../../images/menu/a3.png);
}
.mm-a4 {
background-image: url(../../images/menu/a4.jpg);
}
.mm-a5 {
background-image: url(../../images/menu/a5.png);
}
.mm-a6 {
background-image: url(../../images/menu/a6.png);
}
.mm-a7 {
background-image: url(../../images/menu/a7.png);
}
.mm-a8 {
background-image: url(../../images/menu/a8.png);
}
.mm-q2 {
background-image: url(../../images/menu/q2.png);
}
.mm-q3 {
background-image: url(../../images/menu/q3.jpg);
}
.mm-q5 {
background-image: url(../../images/menu/q5.png);
background-image: url(../../images/menu/Q5_Miniatura.jpg);
}
.mm-q7 {
background-image: url(../../images/menu/q7.png);
background-image: url(../../images/menu/q7.jpg);

}
.mm-q8 {
background-image: url(../../images/menu/q8.png);
background-image: url(../../images/menu/Miniatura-Q8.jpg);
}
.mm-tt {
background-image: url(../../images/menu/tt.png);
}

.mm-etron {
background-image: url(../../images/menu/Miniatura-e-tron.jpg);
}

.mm-r8 {
background-image: url(../../images/menu/Miniatura-R8.jpg);
}

Hi,

Thanks. Yes, you would need to update your selectors so that they override the MMM ones (if you did not want to use “!important”). I do not see any menu items with a custom class of mmLink, so the first thing to do would be to apply those custom classes.

It is an unusual request as usually the plugin would do this sort of thing for you. For example, adding images to a sub menu:

https://www.megamenu.com/documentation/how-to-display-images-in-sub-menu/

(you would have to make “Todos los modelos” into a top level item though. The closest we have to your old layout is the tabbed sub menu in MMM Pro, which you can see on the homepage of megamenu.com)

Regards,
Tom

I will use this feature, I was just trying to take advantage of the existing code since it is a legacy website. Thank you very much for your quick responses.
Regards,
Santi