sparkles2.png

Mega Menu - Different Hover Colours

 

This effect allows you to change the text colour on hover for each individual items on the Mega Menu.

 
 
 

See the effect in action

 
Screenshot 2021-07-09 at 13.16.30.png
 
 
 

How to use the Effect

Simply copy the below code and paste it into the 'edit CSS' section of Blocklab, hit save and publish on the front end.

 

CSS

#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(2) > a:hover {
    color: #012169 !important;
}

(To change the colour of the hover, change the part of the code in Red)
(Remember to set your Mega Menu ID in 
Blue. To find out yours, please refer to the guide)  FIND YOUR MEGA MENU ID
(Start with (2). For extra menu items, you will need to copy the code but change the section in 
Green for each additional menu item. See below for reference)

 

EXAMPLE

#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(2) > a:hover {
    color: #012169 !important;
}
#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(3) > a:hover {
    color: #C8112F !important;
}

For this menu, it was 7 items long and alternating between 2 colours. This is how it was laid out - notice how the (number) changes each time?

#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(4) > a:hover {
    color: #012169 !important;
}
#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(5) > a:hover {
    color: #C8112F !important;
}
#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(6) > a:hover {
    color: #012169 !important;
}
#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(7) > a:hover {
    color: #C8112F !important;
}
#shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .dropdown > a:hover, #shop #blocklab-header #mega-menu-v2_1618923755470 .yamm .yamm-fw:nth-of-type(8) > a:hover {
    color: #012169 !important;
}