Mega menu customisation

[micheal_w]

Hi Guys,

after trying out all possible options, I couldn’t solve the issues below:

1. how do I get rid of the arrows from the mega menu names?
(note: I ticked the “hide arrow” option but it is still there. (attahed pic1)

2. if I want to use SLIDE effect instead fade, how to do that?
By changing it in the Appearance menu, doesn’t seem to do anything 🙁 (attached pic2)

3. how do I change the colour of the submenu text of the mega menu?
I went through all option in Customiser as well as in Max Mega menu but couldn’t find an option to change it (I just want it #fff)

If you could help me please, that would be much appreciated.
Thank you!

Attachments:

You must be logged in to view attached files.

[micheal_w]

…two more things please?

4. the contact icon seems a bit upwards compared to the other ones… Can I move it down by 2px? (attached pic4)

5. how to get rid of the roundness of corners of the mega menu’s dropdown background? (attached pic5)

Thank you guys!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please add this to Theme Options => Custom CSS

1)

#header .std-menu ul.mega-menu > li.mega-menu-item-has-children > a:after { 
	display: none 
}

2) Are you referring to the child item dropdown animation?

3)

li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    color: red;
}
li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover, li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
    color: blue;
}

4)

a.contact-menu-link > i {
    vertical-align: -7px;
}

5)

ul.mega-sub-menu {
    border-radius: 0!important;
}

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

2) Currently that is not possible to do.

6) To an extent yes using CSS:

#header .std-menu ul.mega-menu > li:hover {
    background-color: #fff;
}
#header .std-menu ul.mega-menu > li:hover a {
    color: #222!important;
}
li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover, 
li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
    color: white!important;
}

7) Your site already has a background behind the menu items.

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

2) So you want to remove the smooth animation in? If you open functions.js locate all instances of this and change 200 to 0:

jQuery(this).find('ul.mega-sub-menu').first().stop( true, true ).fadeIn(200);

To get this to, you will need this Off Performance Options => Load pre-minified scripts => Off

7) If I understand this right, yes you can use this and amend the color value:

li.mega-menu-megamenu > ul.mega-sub-menu li:hover.mega-menu-item > a.mega-menu-link {
    background-color: red;
}

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

7) You can amend it to this:

li.mega-menu-megamenu > ul.mega-sub-menu li:hover.mega-menu-item > a.mega-menu-link {
    background-color: black;
    display: inline-block;
}

Thanks

[micheal_w]

This reply has been marked as private.

[David Martin – Support]

Sorry, it should have been this:

li.mega-menu-megamenu > ul.mega-sub-menu li:hover.mega-menu-item > a.mega-menu-link {
    background-color: black;
}
li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    display: inline-block;
}