# Pinegrow Interactions in WordPress menus breaks the site

**URL:** <https://forum.pinegrow.com/t/pinegrow-interactions-in-wordpress-menus-breaks-the-site/6754>\
**Category:** Bug Reports\
**Created:** [August 3, 2022, 3:29pm UTC](https://forum.pinegrow.com/t/pinegrow-interactions-in-wordpress-menus-breaks-the-site/6754 "2022-08-03T15:29:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [August 3, 2022, 3:29pm UTC](https://forum.pinegrow.com/t/pinegrow-interactions-in-wordpress-menus-breaks-the-site/6754/1 "2022-08-03T15:29:19Z")

</div>

When I add an Interaction to an element inside a WordPress menu, I get the following error from WordPress.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/9/9a773293c1ba8e1e3008f67d8602210ed6d5a2ed.png)

Apparently, WordPress doesn’t like the Pinegrow Interaction code in the PHP file

```auto
PG_Smart_Walker_Nav_Menu::$options['template'] = '<li class="group px-4 py-2 relative lg:focus-within:bg-gray-700 lg:focus-within:text-white lg:hover:bg-gray-700 lg:hover:text-white {CLASSES}" data-pg-ia='{"l":[{"trg":"mouseenter","t":"this","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"scale":1},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":0.5,"l":{"scale":1.2},"e":"Power1.easeOut"},{"t":"tween","p":0.5,"d":0.5,"l":{"scale":1},"e":"Power1.easeOut"}]}]}}]}' id="{ID}"><a class="cursor-default flex focus:underline items-center no-underline" {ATTRS}><span class="pr-1">{TITLE}</span></a>

```

Here is a sample project demonstrating the issue and an archive of the LocalWP site that I used for testing in the \_LocalWP directory. The username / password for the LocalWP site are pinegrow / pinegrow.

> **[GitHub - adamslowe/ppd-wpmaster-simplify at test-pgia](https://github.com/adamslowe/ppd-wpmaster-simplify/tree/test-pgia)**
>
> test-pgia

---

<div class="post-metadata">

**Author:** ![matjaz](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/matjaz/32/5_2.png) [@matjaz](https://forum.pinegrow.com/u/matjaz)\
**Post date:** [August 4, 2022, 11:29am UTC](https://forum.pinegrow.com/t/pinegrow-interactions-in-wordpress-menus-breaks-the-site/6754/2 "2022-08-04T11:29:50Z")

</div>

@adamslowe thanks for the report! The problem happens because PG forgets to escape the quotes. I’ll fix that.

For now, a workaround is to define the animation on the Main Nav element and use Target to target the li.group.

Here is the code snippet:

```auto
<nav class="hidden w-full space-y-2 lg:flex lg:items-center lg:space-x-4 lg:space-y-0 lg:w-auto" data-pg-name="Main Nav" data-pg-ia='{"l":[{"trg":"mouseenter","a":{"l":[{"t":"","l":[{"t":"set","p":0,"d":0,"l":{"scale":1},"e":"Power1.easeOut"},{"t":"tween","p":0,"d":0.5,"l":{"scale":1.2},"e":"Power1.easeOut"},{"t":"tween","p":0.5,"d":0.5,"l":{"scale":1},"e":"Power1.easeOut"}]}]},"t":"li.group"}]}'>
    <ul class="flex flex-col font-light items-start text-gray-700 uppercase lg:flex-row lg:items-center" data-pg-name="Menu List" wp-nav-menu wp-nav-menu-theme-location="primary" wp-nav-menu-type="smart" wp-if-has-nav-menu="primary">
        <li class="group px-4 py-2 relative lg:focus-within:bg-gray-700 lg:focus-within:text-white lg:hover:bg-gray-700 lg:hover:text-white"><a class="cursor-default flex focus:underline items-center no-underline" href="#submenu-trigger"><span class="pr-1">Home</span></a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">About</a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">Features</a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">Services</a>
        </li>
        <li role="group" class="focus-within:bg-gray-700 focus-within:text-white hover:bg-gray-700 hover:text-white px-4 py-2" cms-no-export>
            <a href="#" class="no-underline focus:underline hover:underline" role="menuitem">Contact</a>
        </li>
    </ul>
    <a href="#" class="inline-block px-5 py-2 text-white no-underline uppercase transition-all duration-200 ease-in-out bg-gray-600 rounded focus:bg-gray-900 focus:underline hover:bg-gray-900 hover:underline">Sign Up</a>
</nav>

```

---

<div class="post-metadata">

**Author:** ![adamslowe](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/adamslowe/32/4590_2.png) [@adamslowe](https://forum.pinegrow.com/u/adamslowe)\
**Post date:** [August 4, 2022, 2:04pm UTC](https://forum.pinegrow.com/t/pinegrow-interactions-in-wordpress-menus-breaks-the-site/6754/3 "2022-08-04T14:04:59Z")

</div>

Awesome! I have a fully accessible and responsive menu with dropdowns in one of my real projects. Once we can get this and the nav walker thing sorted I’ll post a stripped down project for people to use as a model.