Keep classes added by jQuery after window resize

Question

I'm building a plugin menu for a Wordpress website using the Divi theme.

I add a class using the following code:

jQuery("#cdBarsicon").click(function () { jQuery(".cdMobileMenu").addClass("cdMobileActive"); });

I noticed while testing on a mobile browser that my menu is closed when scrolling down. What actually happens is that the window is resized when the mobile browser hides the navigation area.

So I realized that all jQuery class changes are reset after the window is resized.

This is probably normal, but how would I keep the menu visible after resizing the window?

I tried using vanilla javascript instead of jQuery, same problem.

function openMobileMenu() { document.getElementById("cdMobileMenu").classList.add("cdActive"); }

I also tried using css() and show() instead of addClass, same problem. It gets reset.

I'm considering using a cookie but I feel I'm missing a simpler solution.

Answer 1

I'm not sure exactly why but the solution in this case was to use the text block instead of the code block in the Divi builder to add the shortcode that displays my menu.