Is it possible to have a TopBar in an Offcanvas layout? The Offcanvas example in the Docs uses a TabBar.
Thursday, March 06, 2014 at 11:41 AM EST
Combining them is not a supported feature. You can use them together just as it's done in the docs. You can use visibility classes to hide the topbar on mobile or use interchange.
I'd like to put TopBar in the contents area, not in the Offcanvas sidebar. The docs don't seem to show using a TopBar - they just show using a TabBar or, am I missing something? Sorry, I'm new to Foundation and just trying to work out how to do things.
Right now, I want to have a TopBar menu that has standard menu options as well as the Hamburger Menu icon to trigger the Offcanvas sidebar.
If I understand correctly, you want to put the button that triggers the offcanvas menu inside a topbar. This should be possible, though not necessarily advisable.
To activate the offcanvas from a top-bar item, just include a link of class.left-off-canvas-toggle (or .right-off-canvas-toggle as necessary).
The problem is that the top-bar changes into a dropdown-style nav on small screens. That would mean that you'd have to hit the topbar hamburger to show the offcanvas trigger when you're on a mobile device, which is pretty kludgy.
The other two options would be to set the topbar breakpoint really low (0rem) so that it never triggers, making your topbar crammed with all the nav items, or else making the hamburger nav on the topbar also trigger the offcanvas, which is confusing if you want to reach a link from the topbar, since you'd have to click the hamburger and close the offcanvas before clicking on your link.
TL;DR: You can, but you probably shouldn't.
Create an Account
Get up to speed FAST, learn straight from the experts who built Foundation.
Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.
Or if you prefer, contact the Foundation Team at [email protected] or (408) 341-0600 x635