Pagefly Mobile Menu not working

Technical Q&A
, ,
1

When I click the menu hamburger in mobile version, it does not ddo anything

2

You are right, it just doesn’t work at all. not even giving proper error just fails gracefully doing nothing.
Here’s the quick solution js code:

<script>
const closeIcon = document.querySelector(‘.js-mobile-nav-toggle .icon-close’);const hamburgerIcon = document.querySelector(‘.js-mobile-nav-toggle .icon-hamburger’);const navMenu = document.querySelector(‘.mobile-nav-wrapper’);

document.addEventListener(‘click’, (e) => {// Make sure the toggle button was clickedif (e.target.closest(‘.js-mobile-nav-toggle’)) {
// Toggle icon visibility
const isCloseVisible = closeIcon.style.display !== 'none' && getComputedStyle(closeIcon).display !== 'none';

if (isCloseVisible) {
  closeIcon.style.display = 'none';
  hamburgerIcon.style.display = 'inline-block';
} else {
  closeIcon.style.display = 'inline-block';
  hamburgerIcon.style.display = 'none';
}

// Toggle menu visibility
const isMenuVisible = getComputedStyle(navMenu).display !== 'none';

if (isMenuVisible) {
  navMenu.style.transform = 'translateY(-100%)';
  navMenu.style.display = 'none';
} else {
  navMenu.style.display = 'block';
  navMenu.style.transform = 'translateY(15%)';
}

}

});
</script>

Add this in header.liquid or theme.liquid. May be add in theme.liquid just before tag.

Hope this helps. Best

3

It does! Thank you!
However, one of the menu item is missing.

4

How many were there before, i see 6 now.

5

image
image843×103 2.02 KB

7. THANKS IN ADVANCE

6

I have updated the code above, you can copy paste it, the same way as earlier.

Also i am sure either you missed or you are just in the process but your footer does not have spacing left and right, the content touches the borders and the social links are also too squished. Also as a suggestion its ok if you remove or at least scale the size down of the ssl badge on the footer doesn’t make it any better. Just a few things i noticed and thought would help.

7

Thank you very much for your help!