Support » Plugin: Max Mega Menu » Custom classes override

  • Resolved santifri

    (@santifri)


    Hi, I have recently installed Max Mega Menu to get new menu functionality. All good except the custom classes that create a grid with images within a submenu. The classes load well but the css is overwritten by mmm. The only way it works is with “!Important” on every line of code but I don’t want to do this. Any idea how to fix it?

    This is how it looked before installing mmm: https://imgur.com/a/pDK18m5

    Thx in advance!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author megamenu

    (@megamenu)

    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

    Thread Starter santifri

    (@santifri)

    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);
    }

    Plugin Author megamenu

    (@megamenu)

    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

    Thread Starter santifri

    (@santifri)

    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

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Custom classes override’ is closed to new replies.