Menu icon Foundation
Dropdown and Off-canvas nav broken after WordPress update

Hi,

I'm using the JointsWP theme on some of my sites. Some are using Foundation5 and more recent ones are using Foundation6. After the latest WordPress update to 4.2.2 the navigation breaks for the top bar and the off canvas navigation for sites using Foundation5.

The top bar works fine but submenu items are only shown on click instead on on hover as it should. Also the off canvas menu breaks. It shows the container to reveal the off canvas nav but it just doesn't do anything...

Anyone else having this issue as well? I've already contacted the theme author but I'm trying it here as well. Below is a very basic menu which worked out of the box on an older version of WordPress but breaks after the latest update.

<section class="top-bar-section">
    			<ul id="menu-top" class=""><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://localhost:8888/wp/svg-map/">SVG map</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19 has-dropdown"><a href="http://localhost:8888/wp/reserveren/">Reserveren</a>
<ul class="dropdown">
	<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost:8888/wp/voorbeeld-pagina/">Voorbeeld pagina</a></li>
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/wp/voorbeeld-pagina/">Voorbeeld pagina</a></li>
</ul>			</section>
		</nav>
	</div>
</div>

<!-- This is the nav that will show for mobile/small devices -->
<div class="large-12 columns show-for-small-only">
	<div class="contain-to-grid">
		<nav class="tab-bar">
			<section class="middle tab-bar-section">
				<h1 class="title">WordPress Test Site</h1>
			</section>
			<section class="left-small">
				<a href="#" class="left-off-canvas-toggle menu-icon" ><span></span></a>
			</section>
		</nav>
	</div>
</div>
            

         

jointswp

Hi,

I'm using the JointsWP theme on some of my sites. Some are using Foundation5 and more recent ones are using Foundation6. After the latest WordPress update to 4.2.2 the navigation breaks for the top bar and the off canvas navigation for sites using Foundation5.

The top bar works fine but submenu items are only shown on click instead on on hover as it should. Also the off canvas menu breaks. It shows the container to reveal the off canvas nav but it just doesn't do anything...

Anyone else having this issue as well? I've already contacted the theme author but I'm trying it here as well. Below is a very basic menu which worked out of the box on an older version of WordPress but breaks after the latest update.

<section class="top-bar-section">
    			<ul id="menu-top" class=""><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="http://localhost:8888/wp/svg-map/">SVG map</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-19 has-dropdown"><a href="http://localhost:8888/wp/reserveren/">Reserveren</a>
<ul class="dropdown">
	<li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost:8888/wp/voorbeeld-pagina/">Voorbeeld pagina</a></li>
</ul>
</li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/wp/voorbeeld-pagina/">Voorbeeld pagina</a></li>
</ul>			</section>
		</nav>
	</div>
</div>

<!-- This is the nav that will show for mobile/small devices -->
<div class="large-12 columns show-for-small-only">
	<div class="contain-to-grid">
		<nav class="tab-bar">
			<section class="middle tab-bar-section">
				<h1 class="title">WordPress Test Site</h1>
			</section>
			<section class="left-small">
				<a href="#" class="left-off-canvas-toggle menu-icon" ><span></span></a>
			</section>
		</nav>
	</div>
</div>
            

         
Rafi Benkual over 3 years ago

Not much of a WordPress wiz here but wondering if you can check the rendered code or if you have a link to the live page. If the empty anchor tags are stripped out it could case it.

Jeremy Englert over 3 years ago

This is caused by an issue with an older version of JointsWP. Essentially, there was a few extra spaces in a functions.php file that was adding extra junk to the URL of enqueued assets.

A fix an full details can be found here: https://github.com/JeremyEnglert/JointsWP/issues/164