custom menu element

[OLVVDB]

Hi everyone,

[https://tomhallet.com/](link url)

I’m running into a problem. I am creating a mega menu.

On the initial page load, the menu works perfectly (mouse click event triggers the mega menu to display): clicking the “Exhibitions” menu trigger opens the mega menu. However, if I navigate away and then return to the homepage — either by clicking the logo or the browser back button — the mega menu no longer opens when I click the trigger.

It seems like the .menu_trigger loses its functionality on these subsequent visits. I suspect it might be related to LayTheme’s PJAX or page caching behavior, but I’m not sure how to fix it.

this is how I buiild it: Here’s how I built it:

The menu trigger is a paragraph element:

<p class="_Default menu_trigger" style="text-align: center; line-height: 0.8;">Exhibitions</p>

When the menu is open, it adds the class is-open:

<p class="_Default menu_trigger is-open" style="text-align: center; line-height: 0.8;">Exhibitions</p>

The mega menu itself is a div with the class .megamenu containing a stack of columns with links:

<div class="col ... megamenu ...">
  <div class="stack-wrap">
    <div class="stack-element">
      <div class="col ... type-text ...">
        <div class="text">
          <p><a href="...">Project 1</a></p>
          <p><a href="...">Project 2</a></p>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Has anyone experienced this before, or does anyone know how to ensure the mega menu works even after navigating back to the homepage?

Thanks in advance for any help!

[arminunruh]

hey there!!

binding click events should be done in a delegated way:
https://laytheme.com/documentation/custom-javascript.html#binding-click-events

then it should work

[OLVVDB]

Great, Thnx Armin!