Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

menu hover effects not working

1 week 6 days ago #1

  • maffeaffe's Avatar
  • maffeaffe
  • Posts: 1464
Hi, on this website: asbreuktp.nl I'm trying to use the hover 7 effect for menu. I've copied all the code from here: www.balbooa.com/blog/tips-and-tricks/28-...site-builder-gridbox

But it's not working

1 week 6 days ago #2

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 22679
Hello,
Thank you for contacting us

Send us a link to page with problem.

Regards,
Vyacheslav, Balbooa.com

1 week 6 days ago #3

  • maffeaffe's Avatar
  • maffeaffe
  • Posts: 1464
Hi it's asbreuktp.nl

1 week 6 days ago #4

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 22679
Turn off minimization so that we can see the code that you added

Best Regards,
Vyacheslav, Balbooa Support Team

1 week 6 days ago #5

  • maffeaffe's Avatar
  • maffeaffe
  • Posts: 1464
ok, turned it off.

1 week 6 days ago #6

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 22679
You need to add the class menu in the module settings
support.balbooa.com/forum/gridbox/10269-...us-on-megamenu#64448

Best Regards,
Vyacheslav, Balbooa Support Team

1 week 5 days ago #7

  • maffeaffe's Avatar
  • maffeaffe
  • Posts: 1464
Sorry, still not working

1 week 5 days ago #8

  • Vyacheslav's Avatar
  • Vyacheslav
  • Posts: 22679
You need to use this JS code
document.addEventListener('DOMContentLoaded', function(){
   jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(index, el){
        var elVal = jQuery(el).text();
        jQuery(el).attr('data-hover', elVal);
    });
  jQuery(".nav-hover-effect .main-menu .nav.menu > li a").wrapInner("<span></span>");
 jQuery('.nav-hover-effect .main-menu .nav.menu > li a').each(function(){
      let style = getComputedStyle(this),
          color = style.backgroundColor,
          borderColor = style.borderTopColor;
      this.style.setProperty('--button-background-color', color);
      this.style.setProperty('--button-border-color', borderColor);
    }).on('mouseenter', function(){
        let color = getComputedStyle(this).backgroundColor;
        this.style.setProperty('--button-background-hover', color);
    });
});
Best Regards,
Vyacheslav, Balbooa Support Team
Powered by Kunena Forum