Menu icon Foundation
Using off canvas with a top bar?

Hi,

Is it possible to use the off-canvas bar as we can use the top bar? It seem to be one or the other?

I'm not the best at explaining so here is a good example: http://olympique.ca

On the left side it has the off-canvas button regardless of the screen size, clicking it produces a menu as expected, this is easily achieved with off canvas, on the right side it has the social icons, search bar and drop down menu when hovering over social icons.. this is loosely what i want to achieve but nothing will style correctly inside the bar

Is the Olympique site using an older version of Foundation or has it been hacked together? i tried to piece it together going through their source code but failed there as well.

offcanvastopbar

Hi,

Is it possible to use the off-canvas bar as we can use the top bar? It seem to be one or the other?

I'm not the best at explaining so here is a good example: http://olympique.ca

On the left side it has the off-canvas button regardless of the screen size, clicking it produces a menu as expected, this is easily achieved with off canvas, on the right side it has the social icons, search bar and drop down menu when hovering over social icons.. this is loosely what i want to achieve but nothing will style correctly inside the bar

Is the Olympique site using an older version of Foundation or has it been hacked together? i tried to piece it together going through their source code but failed there as well.

Rafi Benkual over 5 years ago

The site you linked is using a very custom Foundation 4 topbar. They made a custom class of Flyout which is the slide out menu. It is not off-canvas.

It sounds like you want to make off-canvas have elements inside the tabbar. I have not tried that, but im sure its possible.

I suggest you post your code in codepen and share it so we can all help out http://codepen.io/mhayes/pen/qdCAc

Steve Trask over 5 years ago

Hi Michael,

Rafi is right they have customised the menu but I have just had a very quick play (please excuse the indenting!)

http://cdpn.io/cwaLC

I have tried inserting the top bar into the main content area of the off canvas menu but this breaks the dropdowns in the top bar the best solution is to have the top bar above and then find a way to trigger the off canvas with the 'My Site' text of whatever you want there. by no means perfect but I think it will work.

Hope this helps

Steve

Wing-Hou Chan over 5 years ago

Hey Michael!

Take a look at my Pen: http://codepen.io/winghouchan/pen/pBrax/

This should set you on the right track.

One problem I would consider when attempting to implement this is that the topbar might become too small to accommodate all your other links. My Pen demonstrates a solution without other links but if you do have other links you will want to take any CSS rules out of the media query that controls the look of the topbar on viewports less than ~40rem. It gets quite 'hacky' at this point.

Michael Forcer over 5 years ago

Thanks for the input guys, i'm now close to achieving what i want, here's a code pen for anyone else who is interested in this:

http://codepen.io/GoodBytesUK/pen/ockmz

Slight issue with mobile view it kills the alignment of the hamburger icon.

Wing-Hou Chan over 5 years ago

Hey Michael!

That looks great!

To fix the alignment of the hamburger icon reduce the padding on a.menu-icon. I think a padding of 3px 0 0 3px should do.

Michael Forcer over 5 years ago

Thank you,

here is the final version [hopefully]: http://codepen.io/GoodBytesUK/pen/ockmz

The padding in the mobile media query only wanted to work with !important added to it, even though it's the last thing in my stylesheet.

Darin Wilson over 5 years ago

That was super-helpful, Michael - thanks! :)