Menu icon Foundation
Fixed Nav for Off-Canvas with Landscape Support

I believe I got this not being so hacky and looking exactly as it should on all devices. It is a fixed navbar for large and up, then med and down it uses a fixed standard off-canvas in portrait, then in landscape shifts to the left side to allow more vertical screen space. Anyone see any issues with this?

*Edit* Updated Fiddle:

http://jsfiddle.net/KBne4/12/

Fixed Off-Canvas Landscape Portrait Orientation

I believe I got this not being so hacky and looking exactly as it should on all devices. It is a fixed navbar for large and up, then med and down it uses a fixed standard off-canvas in portrait, then in landscape shifts to the left side to allow more vertical screen space. Anyone see any issues with this?

*Edit* Updated Fiddle:

http://jsfiddle.net/KBne4/12/

Karl Ward over 5 years ago

nice work. I'm mostly interested in how you got it properly fixed, but I'll look into that later ... ;)

Matt H over 5 years ago

what do you mean properly fixed? I'd be happy to tell ya.

Brandon over 5 years ago

Hello.. I've decided to implement what you've got here. Thank you for building it.

I think you forgot the "data-offcanvas" on the I had to add that to get it to work.

ALSO, I'm finding that the Off-canvas-wrap isn't fully responding on mobile.

The menu button is responsive when at the top of the page, but when scrolled down a bit, it is no longer responsive... It SHOWS as fixed to the top, but ACTS like it scrolls with the content.. make sense?

You can check it here:
http://voombaskos.com/

I'm not using all of your code, just trying to get the off-canvas-nav to be sticky/fixed to the top.

Again, thank you for your effort.. and thank you for any assistance.

HAPPY 4th OF JULY!

-B

Matt H over 5 years ago

I don't even know what data-offcanvas does, but in the js fiddle and my personal site it seems to work fine, what was happening without it?

I'm not sure what you mean. Even when I go to your site on my phone, besides the name being in the landscape mode, everything seems to work as intended, even when I scroll down and hit the menu button, the menu appears just like it would at the top. Or I may not be understanding what you mean.

As the name showing in landscape, I would suggest starting with:
<section class="show-for-portrait right tab-bar-section">
<h1 class="title">VOOMBASKOS</h1>
</section>

But comparing the jsfiddle to your site, I see you have a in a different spot, the fiddle it is directly after the fixed off canavas div.

Does that fix the issue you are experiencing?

Brandon over 5 years ago

Based on your reply, it seems it is working differently on your mobile than it is for my iPhone 5 with latest OS.

The tag location does not effect the issue.

Thank you for your prompt reply.

Matt H over 5 years ago

well good to know, I'll have to get my hands on an iOS device and see whats up. I swear web building would be so much easier if Microsoft and Apple just stopped making internet browsers lol.

Matt H over 5 years ago

So how about this? I finally got myself an iOS device to test stuff on. I still wonder why people use these damn things... but thats another topic, heres the updated code:

http://jsfiddle.net/KBne4/12/

adds href="#" to the menu icon