Mega Menu - Bottom Border on Hover

This code applies a hover effect on the Mega Menu to help highlight what you are selecting.

How to use the Effect

To start with, view your site on the Front end.

1. Right click on the Mega Menu and click 'Inspect' to bring up the developer console.
2. If the Mega Menu is not selected, click the top right icon which looks like a mouse on a square and then click the Mega Menu.
3. Look at the code for the 'div id'. You will see something that says navbar-collapse-mega-menu_mega-menu-v2_1623687432985.
4. Copy the section in Blue and keep that number to the side.

Next up, click on the 'Options' tab in the top header of Blocklab, click 'Advanced' and head to the 'edit CSS' area to paste in the code below. Once pasted, replace the Blue text with the number that you acquired earlier. Hit 'Save', publish the site on the front end and refresh for the effect to take place.

CSS

#shop #navbar-collapse-mega-menu_mega-menu-v2_1623320504482 li[class^="yamm"] > a::after, #shop #navbar-collapse-mega-menu_mega-menu-v2_1623320504482 .dropdown > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0px;
    right: 100%;
    width: 0%;
    border-bottom: 2px solid #d54635;
    transition: all 1s;
}
#shop #navbar-collapse-mega-menu_mega-menu-v2_1623320504482 li > a:hover:after {
    width: 100%;
}
#shop #navbar-collapse-mega-menu_mega-menu-v2_1623320504482 .caret {
    display: none;
}

(To change the colour of the border bar, edit the Green section)
(To change the thickness of the border bar, edit the Red section)