nav menu which overlays toggle

I have a scenario on a website where when the user clicks the hamburger menu the menu shows with an x in the corner to close the menu. the usual toggle button (hamburger button) is below the off-canvas menu.

Any idea how to make this x close the menu? i tried adding the toggle class to the X button but didn’t work, clicking outside the menu also wont close it.

This is in my functions file
[code]
add_theme_support(
'amp',
array(
'nav_menu_toggle' => array(
'nav_container_id' => 'offCanvas',
'nav_container_toggle_class' => 'is-open',
'menu_button_id' => 'menu-toggle',
'menu_button_toggle_class' => 'active',
),
'paired' => true,
)
);
[/code]

this is in my top-menu file
[code]
<div class="mobile-toggle small-2 medium-1 hide-for-large cell">
<a><img />&amp;quot; alt=&amp;quot;&amp;amp;lt;?php _e('Open Menu'); ?&amp;amp;gt;&amp;quot;&amp;amp;gt; &amp;amp;lt;br&amp;amp;gt;Menu</a>
&amp;amp;lt;/div&amp;amp;gt;
[/code]

my off-canvas section contains
[code]
&amp;amp;lt;button class=&amp;quot;close-button active&amp;quot; aria-label=&amp;quot;Close menu&amp;quot; type=&amp;quot;button&amp;quot; data-close&amp;amp;gt;
&amp;amp;lt;span aria-hidden=&amp;quot;true&amp;quot;&amp;amp;gt;&amp;amp;times;&amp;amp;lt;/span&amp;amp;gt;
&amp;amp;lt;/button&amp;amp;gt;
&amp;amp;lt;br&amp;amp;gt;
&amp;amp;lt;div class=&amp;quot;is-drilldown&amp;quot; style=&amp;quot;min-height: 627px; max-width: 306px;&amp;quot;&amp;amp;gt;
&amp;amp;lt;?php wp_nav_menu( array(
'theme_location' =&amp;amp;gt; 'main_menu',
'menu' =&amp;amp;gt; '',
'container' =&amp;amp;gt; '',
'container_class' =&amp;amp;gt; '',
'container_id' =&amp;amp;gt; '',
'menu_class' =&amp;amp;gt; 'mobile-menu',
'menu_id' =&amp;amp;gt; '',
'echo' =&amp;amp;gt; true,
'fallback_cb' =&amp;amp;gt; 'wp_page_menu',
'before' =&amp;amp;gt; '',
'after' =&amp;amp;gt; '',
'link_before' =&amp;amp;gt; '',
'link_after' =&amp;amp;gt; '',
'items_wrap' =&amp;amp;gt; '&amp;amp;lt;ul id = &amp;quot;%1$s&amp;quot; class = &amp;quot;%2$s vertical menu drilldown&amp;quot; data-drilldown data-parent-link=&amp;quot;true&amp;quot;&amp;amp;gt;%3$s</ul>',
'depth' =&amp;amp;gt; 0,
'walker' =&amp;amp;gt; new gs_walker_drilldown,
) ); ?&amp;amp;gt;
&amp;amp;lt;/div&amp;amp;gt;
[/code]

I am testing this on a dev machine and the url i added in this ticket is for v0.7.2 I hope to upgrade to 1.1.3 which bar a few issues (like this one) has gone very well as usual.

ps how do you add a code block on here…

• This topic was modified 5 years, 5 months ago by craigstanfield.
• This topic was modified 5 years, 5 months ago by craigstanfield.

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