Menu icon Foundation
Nav-offcanvas-sidebar not working on mobile or tablet

Hi,

I recently updated my site with f5 and am super happy with it. The only issue I'm having at the moment is that the nav-offcanvas-sidebar toggle doesn't work on mobile or tablet. It seems to work just fine on desktop though. MY site is at oneonesixtwo.com - any suggestions would be massively appreciated. I ran console and checked for js errors, but can't find any which would cause this. I've attached the code too incase it helps.

Cheers,
Stu

            

         <div class="contain-to-grid fixed">
    	<nav class="tab-bar">
			<section class="middle tab-bar-section">
				<h1 class="title"><a href="<?php echo home_url(); ?>"><img src="http://oneonesixtwo.com/wp-content/uploads/2014/07/logomain.png" style="width:7em;margin-top:16px"></a></h1>
			</section>
			<section class="left-small">
				<a class="left-off-canvas-toggle sidebar-button" ><span><i class="fi-thumbnails"></i></span></a>
			</section>		
			<section class="right-small">
			<p id="back-top">

								<a href="#top"><span><i class="fi-arrow-up"></i></span></a>
							</p>
						</section>
		</nav>
	</div>

offcanvasoff canvasoff-canvas mobilemobiletablet

Hi,

I recently updated my site with f5 and am super happy with it. The only issue I'm having at the moment is that the nav-offcanvas-sidebar toggle doesn't work on mobile or tablet. It seems to work just fine on desktop though. MY site is at oneonesixtwo.com - any suggestions would be massively appreciated. I ran console and checked for js errors, but can't find any which would cause this. I've attached the code too incase it helps.

Cheers,
Stu

            

         <div class="contain-to-grid fixed">
    	<nav class="tab-bar">
			<section class="middle tab-bar-section">
				<h1 class="title"><a href="<?php echo home_url(); ?>"><img src="http://oneonesixtwo.com/wp-content/uploads/2014/07/logomain.png" style="width:7em;margin-top:16px"></a></h1>
			</section>
			<section class="left-small">
				<a class="left-off-canvas-toggle sidebar-button" ><span><i class="fi-thumbnails"></i></span></a>
			</section>		
			<section class="right-small">
			<p id="back-top">

								<a href="#top"><span><i class="fi-arrow-up"></i></span></a>
							</p>
						</section>
		</nav>
	</div>
Brandon about 5 years ago

I am having a similar problem based on this post : http://foundation.zurb.com/forum/posts/16836-fixed-nav-for-off-canvas-with-landscape-support

The project works great on desktop, but on mobile it does not fully respond correctly.

When scrolled to the top of the page it does work, but when scrolled down a bit the click on the off-canvas does not register.

http://voombaskos.com/

I hope that helps somehow.

Stu about 5 years ago

Hey, Brandon.

Thanks for the response. Your menu on voombaskos.com seems to work pretty well for me. It's fixed on scrolling down, and the menu opens up without any errores.

Strange thing is that my offbar canvas seems to work fine on windows phone :s

Cheers,
Stu

Matt H about 5 years ago

Is both your problems on an iphone/ipad? Both sites work fine on chrome for android on my nexus 5.

Stu about 5 years ago

Hi Matt,

thanks for responding and testing it out, really really appreciate it. Yeah, sorry I should have mentioned, it only seems to be an issue on ipad and iphone. Any thoughts would be more than welcome.

Cheers,
Stu

Matt H about 5 years ago

yup Brandon alerted me to the issue with my nav also, I don't have an iOS device to take a look. I am currently looking at ebay for a iphone 5s with a bad esn so hopefully I can pick one up cheap and see what everyone else is talking about. I never wished to own an iOS device, but it looks like I need to.

Stu about 5 years ago

What's your site address? I could give it a check on iphone/ipad and see if there are any js errors.

Matt H about 5 years ago

http://jsfiddle.net/KBne4/8/

Lemme know if you figure out something... I've been looking on eBay for bad esn phones or an iPod touch for testing but they go for more than I am willing to pay most of the time. Even with broke screens lol

Matt H about 5 years ago

check this out, I think I got her working now http://jsfiddle.net/KBne4/12/