Lvslot Login.Claim Your Free 999 Pesos Bonus Today

Resolved seto76
(@seto76)

1 month, 2 weeks ago

hi rui,

i have a country selector popup on my website that opens once by “on page load” and a menu link in the wordpress menu that opens this popup by mouse click. for this i use css in the elementor popup settings and by the use of “open by selector”.

https://imgur.com/a/SUxGIqG

https://imgur.com/a/2oGaxnn

when i click on the link on the desktop it works fine.

https://imgur.com/a/Z9aPvAX

but in wp mobile menu nothing happens when i click on it.

https://imgur.com/a/KyeeX17

what could be the reason? is the css class in the href not passed to wp mobile menu?

thanky you very much in advance

kind regards
sergio

The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Thread Starter

(@seto76)

it seems to work with the following javascript

document.querySelectorAll('.country-selector').forEach(link => {
  link.addEventListener('click', function() {
    // close the menu
    const menu = document.querySelector('.mobmenu-right-panel');
    const overlay = document.querySelector('.mobmenu-overlay');

    // close the menu if it's open
    if (menu && menu.classList.contains('show-panel')) {
      menu.classList.remove('show-panel'); // closes the menu
    }

    // close the overlay
    if (overlay) {
      overlay.classList.remove('mobmenu-overlay-active');
      overlay.style.display = 'none'; // hides the overlay
    }

    // optional: reset active state of links
    document.querySelectorAll('.country-selector').forEach(item => {
      item.classList.remove('active'); // removes active class from all links
    });
    this.classList.add('active'); // sets the clicked link as active
  });
});

// event listener for the hamburger icon
const menuIcon = document.querySelector('i.mob-icon-menu.mob-menu-icon');
if (menuIcon) {
  menuIcon.addEventListener('click', function() {
    const menu = document.querySelector('.mobmenu-right-panel');
    const overlay = document.querySelector('.mobmenu-overlay');

    // open or close the menu
    if (menu) {
      const isMenuOpen = menu.classList.toggle('show-panel');

      // show or hide the overlay
      if (overlay) {
        overlay.classList.toggle('mobmenu-overlay-active', isMenuOpen);
        overlay.style.display = isMenuOpen ? 'block' : 'none';
      }
      
      // activate or deactivate the hamburger icon
      this.classList.toggle('active');
    }
  });
}