[Support request] sfHover issue in nav menu

Home Forums Support sfHover issue in nav menu

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1194978
    jose

    I have a menu in my WordPress site. The code never adds “open” on click, I don’t know why.

    When i click, it has another code that adds “sfHover” class in #menu-item-300.

    $(document).ready(function() {
      $('#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4').click(function() {
        $(this).toggleClass('open');
      });
    });
      <li id="menu-item-300" class="mega-menu menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor menu-item-has-children menu-item-300">
        <a>
          <div id="nav-icon1">
            <span></span>
            <span></span>
            <span></span>
          </div>
          <span role="presentation" class="dropdown-menu-toggle" aria-expanded="false"></span>
        </a>
      </li>

    It works in codepen, when sfHover its not added. But if sfHover its added, “open” its not added.

    #1195050
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That class is necessary for accessibility reasons.

    What if you target #menu-item-300, instead?

    #1195817
    jose

    Doesnt work. If the menu element is targeted with sfHover, then my js code never works.

    #1195909
    Tom
    Lead Developer
    Lead Developer

    That’s not really how javascript works – multiple events can be triggered by clicking the same element.

    Can you link me to the page so I can take a closer look?

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.