A vertical navigation menu sliding into the screen from outside of the window (off canvas) when the user clicks an icon or performs some other sort of action.
Questions tagged [off-canvas-menu]
109 questions
1
vote
1 answer
Full off-canvas menu
I'm trying to make an off-canvas menu, but encountered a problem.
Only the two first menu links are showing with the grey-black background but I want all of the menu links to have it. The remaining 5 menu links are indeed inside the menu (as you can…
Bryan M
- 13
- 4
1
vote
0 answers
Bootstrap with Offcanvas - 1 Menu, 2 Buttons to open the Menu with data-target
have a problem with Bootstraps data-target/data-toggle and Offcanvas for sliding-in the Nav.
My code you can see here http://modus-media.de/kunden/test/.
This layout has to be created and I have the DIV ".bar" load at two different locations, which…
Nico
- 23
- 5
1
vote
1 answer
Off-canvas nav shows two menus
I am working on a "top bar with off-canvas navigation" using the example from Foundation building block section.
Here is my code,
$(document).foundation();
cheth
- 13
- 2
1
vote
1 answer
How to close off-canvas menu by clicking on window inside canvas?
here's my codepen http://codepen.io/anon/pen/GZWPrj
I know it's been answered few times, but it's too difficult for me to translate it to my code.
So I have a second off-canvas menu which is working as intended.
One thing I want to add is the…
Seb
- 113
- 1
- 4
- 12
1
vote
1 answer
Zurb Foundation 6 sticky header and offcanvas menu
I've been scouring the internet looking for a solution to this, but haven't yet found one.
I have a site with a sticky header/nav that has a hamburger button to open an off canvas menu. The off-canvas-wrapper wraps everything, including the header.…
bmac
- 55
- 8
1
vote
1 answer
Bootstrap 3 offcanvas navigation menu size
I'm trying to change the size of the offcanvas navigation menu for small screens, as it's too narrow for me. I've tried changing it to col-xs-12, but it still doesn't work when toggling...
https://getbootstrap.com/examples/offcanvas/
Does anyone…
Kaori
- 49
- 1
- 7
1
vote
1 answer
Off-Canvas Nav with Dropdown Accordions Clipping Text
I'm using Foundation v5.5 and combined two different js codes to create a usable off-canvas top navigation with dropdown accordions.
However, when any of the dropdown accordions are selected, the text is being clipped because the .offcanvas-top…
timmyg
- 181
- 1
- 14
1
vote
0 answers
Setting Object jQuery Set up?
I am currently trying to use a jQuery plugin that will allow my site to push the right and will reveal the side navigation (offsite navigation) However the developer is saying I must use settings object and my professor doesn't what I am talking…
Breionna Myles
- 31
- 1
- 8
0
votes
0 answers
Is it possible to style the button that activates the offscreen nav when the nav is open? The other items in Bootstrap have aria-expanded="false"
In bootstrap's docs it doesn't seem that the buttons that open them have an aria-expanded="true"
docs
I set up an .active :active state for my offcanvas navs buttons that seems to not be auto set to any type of active state. Normally hover and focus…
cbrophy78
- 15
- 6
0
votes
0 answers
Unable to load Bootstrap & Modal OffCanvas in Angular Application
I am trying to develop frontend for an Angular app with various Bootstrap Components. I copied the code given in Angular-Bootstrap component site and executed the same. But I am getting a datatype issue for 'content' parameter and hence unable to…
Kavignaani
- 1
- 1
0
votes
1 answer
NextJS Tailwind website offcanvas menu hover/tap events not happening outside of parent dimensions
I have a header with an off-canvas menu that comes in from the right. It works as expected, except for one issue: When the menu is visible and open, the mouse/touch events go right through it below to the content underneath.
Here is the code:
import…
Joel Hager
- 2,990
- 3
- 15
- 44
0
votes
0 answers
Bootstrap 5 offcanvas inside container
I am trying to use Bootstrap 5 offcanvas in a responsive design. When using mobile everything works because the offcanvas is relative to the viewport. However when using larger screens, I am using container as the main div (not container-fluid) and…
user1480192
- 665
- 8
- 23
0
votes
1 answer
Failed prop type: Invalid prop nodeRef of type function supplied to Transition, expected object in Reactstrap OffCanvas
I have an issue in the console when I open Offcanvas:
Issue: Failed prop type: Invalid prop nodeRef of type function supplied to Transition, expected object.
I share my code:
import { Button, Offcanvas, OffcanvasBody, OffcanvasHeader } from…
Sakhawat Hossain Sohel
- 91
- 10
0
votes
0 answers
Bootstrap v5.2.0 Offcanvas TrapKeyboard
If I place the offcanvas toggle button close the offcanvas div, the trapkeyboard seems to work just fine, however, if I place the toggle in the header, and stick the offcanvas nav below the footer (it's fixed anyway and hidden so what does it…
Tony
- 84
- 1
- 7
