How can I add Class to a Sub Menu that Overflows to Offscreen?

Question

I want to add Class using Javascript to check if sub menu overflows to offscreen and fix it if it does. I don't know how to do it but Gridlove theme has that feature. It is made with below jQuery codes but I want to do it using Pure Javascript:

$('.gridlove-main-nav').on('mouseenter', 'li', function(e) {
    if ($(this).closest('body').width() < $(document).width()) {
        $(this).find('ul').addClass('gridlove-rev');
    }
});

How can I do what I want using Pure JS codes for the same function?

Website: https://miyavliyo.com/ or https://wisekitten.com/

Answer 1

I didn't understood very well what you mean but your jQuery can be translated like so:

const gridloveMainNav = document.querySelector('.gridlove-main-nav');

gridloveMainNav.addEventListener('mouseenter', e => {
if (e.target.closest('body').offsetWidth < document.offsetWidth) {
e.target.closest('ul').classList.add('gridlove-rev');
}
});

Answer 2

I am looking for the answer to the question asked here as well. Dropdown menu does go out off browser screen - bootstrap 4

The theme I mentioned and the associated code do this successfully. But I couldn't do it with the code you wrote, I couldn't run it.