Menu icon Foundation
off-canvas with fixed top bar

Hello,

I'm trying to display an off-canvas menu inside a fixed top bar.

The problem is, when i click the trigger of the off-canvas inside the fixed top bar, the top bar goes on top of the document, and when i close the off-canvas, the top bar returns to it's fixed position again

Here is an example: http://jsfiddle.net/nebuchar/Sbt75/

offcanvastopbarfixed

Hello,

I'm trying to display an off-canvas menu inside a fixed top bar.

The problem is, when i click the trigger of the off-canvas inside the fixed top bar, the top bar goes on top of the document, and when i close the off-canvas, the top bar returns to it's fixed position again

Here is an example: http://jsfiddle.net/nebuchar/Sbt75/

Nobu Kakegawa almost 6 years ago

What about this workaround? Removed .fixed class and made article scrollable.

http://jsfiddle.net/Sbt75/49/

Karl Ward almost 6 years ago

@Nobu that looks interesting, you have solved it by example at least. I will need to study it when I get time, and check if it can be applied to other scenarios. In any case, good work!

Aaron Terrazas almost 6 years ago

I just discovered this issue with Foundation and switched over to a fixed mobile menu solution I have used in the past. I just implemented this solution with F5 and it worked fine. I don't have anything online to show just yet, but I thought I would share a simple site where I used this solution even though its not F5.

Take the mobile.js and the mobileNav.css

http://lifeaustin.com/cycle/

Hope this helps.

Nathan brown almost 6 years ago

I've just posted my version of a quick fix:

http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas

Not perfect, but it'll do for now!

Andres Bott over 5 years ago

i found a nice solution for making a mixed desktop-mobile navigation menu with of-canvas menu for mobile.

this fiddle is based on Nobu Kakegawa solution.

NOTE 1 - on the fiddle the sticky does not work, but the code works.

NOTE 2 - the only bug i found and was not able to find a solution is that: in mobile version, if you have scrolled down, and pres the menu. you will automaticly scroll back to top.

http://jsfiddle.net/aBott/ucCQ3/1/

Patrick L over 5 years ago

@Andreas Bott

To fix your second bug just add "srolltop: false" in data-options of the Topbar. Or did you mean, if you click on the MENU-ICON to close the menu and the Off-Canvas navigation is scrolling to the top?

Thomas Janotta over 5 years ago

Hi, derived from the BASIC solution

http://foundation.zurb.com/docs/components/offcanvas.html

as described in other forum threads, put a div class="fixed" around nav

i use not the span-code but a text inside the a-tag, resp a font-icon "LIST"
("size-36" is a class for the icon-size)

<a class="left-off-canvas-toggle" href="#"><i class="step fi-list size-36"></i></a>

and style with

.size-36{color:white !important;}

and your class "main-section" (article or section)
a margin-top 45px or so

also you have to change the padding-top

for the new "f-topbar-fixed"-class in the javascript (first occurance)

 i.add_custom_rule(".f-topbar-fixed { padding-top: "+t.data("height")+"px }"),

change t.data(height) to 0

maybe someone knows more css/js, but this works for me.
There is a glitch when you watch it in landscape mode...someone could fix this..

tom.

David Govea over 5 years ago

I think I have found a solution.

I don't like having to mess with scrolling the overflow of content divs - this can make things wonky on mobile.

This pen shows a standard, non-fixed off-canvas (straight from docs)
Whole thing scrolls. http://codepen.io/anon/pen/yDFke

This pen shows the simple approach that people run into problems with.
Wrap the nav in a .fixed div.. "It should just work..?"
http://codepen.io/anon/pen/obwtq

This pen shows my changes. I added an .off-canvas-fixed class.
Inside .off-canvas-wrap, put your NAV and ASIDE menu in .fixed.off-canvas-fixed div
Put CONTENT and .exit-off-canvas link in .inner-wrap (like normal)
http://codepen.io/anon/pen/uGhvr
The only downside is, you need to set the off-canvas menu height using either a static height, "vh" units, or a javascript listener (simple listener in pen)

Karl Ward over 5 years ago

nice

Feather Light over 5 years ago

Many thanks to David Govea ;)
Regards

Benjamin Lancelot over 5 years ago

Oh yeah !!!
Many thanks to David Govea for his post !

sheldon over 5 years ago

@Nobu Kakegawa

thanks

sheldon over 5 years ago

@Nobu Kakegawa

thanks

Feather Light over 5 years ago

Sorry David Govea
How about your pull request https://github.com/zurb/foundation/pull/5135
There is now v.5.3 (For Site) and there has been no news about the development of fixed off-canvas feature

Thanks

Brandon over 5 years ago

I was unable to get this to work on my iPhone 5 with latest OS. :/

Christine Martino over 5 years ago

@David Govea: your solution is a great fix, thanks for sharing!

The only thing I noticed was that the .exit-off-canvas overlay gets covered by the whole .off-canvas-fixed div when it's moved over.

Simply removing the height:100%; from .move-right > .off-canvas-fixed seemed to work.

.move-right > .off-canvas-fixed {
  /*height: 100%;*/
  -webkit-transform: translate3d(15.625rem, 0, 0);
  transform: translate3d(15.625rem, 0, 0);
}

Christian Matthias over 5 years ago

Awesome and thank you.

There is a bug however or perhaps it is some coding I need to add.

On mobile there seems to be horizontal scrolling that automatically comes up on the page that allows for thumbing of the onto a whitespace both left and right.

I added a body width of 100% and when you first land on the page it is correct giving a fixed site. now if I zoom in and out it will allow for the scrolling to reappear again.

Foundations own site doesn't do this as you can only pinch to zoom in but it always reverts back to 100% and doesn't move otherwise.

any suggestions?

Christian Matthias over 5 years ago

Not a bug... I had a margin and width outside of my viewport.

A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.

By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.

sorry...

great solution guys. it really helped.

hopefully Zurb bakes something in to address the issue.

I would like to see the off canvas sticky as well just as a fixed nav is sticky to the top.

Norbert Stüken over 5 years ago

Thanks to David Govea and Nobu Kakegawa for this solution attempt. It seemed to work for me as well, but today I built everything back to a non-sticky foundation-standard off-canvas as it caused some problems. Here a list of problems I experienced. Perhaps you can resolve those:

  1. With the additional header fix of muhammadcahya (https://github.com/zurb/foundation/issues/3710) I couldn't get a typical anchor scrolling like http://css-tricks.com/snippets/jquery/smooth-scrolling/ to work as the "bottom: 0" from the .main-section-class blocked it.
  2. On Opera 23 (Windows 8.1) I had some content overlay scrolling issues after anchors were clicked.
  3. On Safari 5 (Windows 8.1) no link on the menu was clickable.

Hope this helps. I look forward to a fully working solution in a future update of foundation.