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
10
votes
3 answers
Bootstrap Scrollspy causes issues with Off-Canavas Menu
UPDATE: To clear up some confusion I added a fiddle that demonstrates how it is supposed to work, but it is just missing the
scrollspy: https://jsfiddle.net/kmdLg7t0/ How can I add the scrollspyto this fiddle so that the menu highlights when I'm…
ChosenJuan
- 891
- 3
- 26
- 56
3
votes
2 answers
Bootstrap 5 offcanvas is not working with images or icons inside the anchor
You might see it as a duplicate but let me assure you I have looked into several questions on stakeoverflow and was not able to find similar question.
I have implemented Bootstrap 5 offcanvas and there is a weird issue with it.
It works perfectly…
Lonare
- 3,581
- 1
- 41
- 45
3
votes
8 answers
Bootstrap 5 offcanvas disable close on click
I'm using the offcanvas component (https://getbootstrap.com/docs/5.0/components/offcanvas/). However I was wondering if it is possible to prevent it from closing when I click outside the offcanvas window. I've managed to stop it from closing when I…
sharpness
- 125
- 2
- 9
3
votes
0 answers
Zurb Foundation 6 sticky menu in off-canvas sidebar
Hi I am trying to get zurb foundation 6 to have the off-canvas menu with sticky menu inside.
Remaked off-canvas layout to have same height of sidebars and content blocks in desktop view.
Problem:
Sticky menu not working in right off-canvas…
Kasara
- 275
- 2
- 3
- 8
3
votes
1 answer
offcanvas-sidebar bootstrap 4 sticky sidebar
hi i recenty used the bootstrap 4 offcanvas template to build my website
http://v4-alpha.getbootstrap.com/examples/offcanvas/#
now i want to make my side-bar follow as the users scrolls but bootstrap removed the affix class and recommends using css…
J Doe
- 33
- 1
- 8
3
votes
1 answer
Targeting Previous Sibling Element CSS
I'm using off canvas menu that I've been trying to get work correctly. In order to get my fixed menu and off-canvas to play nicely, I had to take my header out of the off canvas inner wrapper, but now my header won't move over when the menu is…
4ever Youngz
- 158
- 1
- 1
- 12
3
votes
2 answers
Foundation 6 Off-canvas menu auto-close after click
I've been searching how to auto-close off-canvas menu after some menu item is clicked but nothing seems to work.
So I followed guide on how to make off-canvas menu on Foundation 6 docs and it works. This part is okay. Now when I click on some link…
Kira
- 1,575
- 4
- 26
- 48
2
votes
2 answers
Bootstrap Offcanvas navigation - don't reset background on close
I've got a long list of links in an offcanvas div. These are in the form because I want to use them to navigate a very long background page. (Effectively, it is a table of contents)
The offcanvas pops up happily. The navigation links work; jumping…
gmak
- 103
- 1
- 11
2
votes
1 answer
Bootstrap 5 Off Canvas sizing issue
I'm using bootstrap 5 off-canvas for collapsing and in same time I have an announcement bar it's just an dismissible alert on top of my navbar.
the question is my off-canvas top size not working good when I click
to close button on dismissible…
jhon-jhones
- 455
- 1
- 13
- 27
2
votes
1 answer
Import a jQuery plugin in a module
I'm trying to import a jQuery plugin (js-offcanvas) with npm but I keep getting the same error:
app.js:20: Uncaught TypeError: $(...).offcanvas is not a function
the app.js file:
import offcanvas from "js-offcanvas"
$('#off-canvas').offcanvas({
…
kayne
- 349
- 2
- 15
2
votes
2 answers
Bootstrap offcanvas example on both (left and right) sides
I am trying to make bootstrap offcanvas example work for both sides. So far I managed to make it slide on both sides, but as I am not very good with css for some reason menus are not in place where they should be. There was very similar template in…
nesvarbu
- 986
- 2
- 9
- 24
2
votes
2 answers
Bootstrap Modal when Off Canvas Sidebar is Open
I am working on a bootstrap site that uses an off canvas sidebar menu. This menu displays a minibasket with cart contents at widths lower than 980px once an item is added to the cart. At the bottom of the menu is a checkout button. The button…
Julie Carlson
- 81
- 2
- 7
2
votes
1 answer
Zurb Foundation 6 off-canvas navigation not working on Android internet browser
The menu icon will not toggle the off canvas menu. When clicked, it changes the opacity of the content section as usual, but doesn't slide to reveal the menu.
My navigation works on all browsers on my pc and mac, on iPhone and in Chrome on my…
BradH
- 21
- 4
2
votes
0 answers
Off-canvas menu sticky
I'm using foundatuon 6 with an off canvas menu. I'm able to get the burger icon sticky by setting the position, but is there a way to stop the actual menu from scrolling with the content? I've looked around and can't seem to find a solution for…
icekomo
- 9,328
- 7
- 31
- 59
1
vote
1 answer
How to use bootstrap off canvas with a table row?
I would like to use the off canvas sidebar in conjunction with my table. Im using node js express app and an ejs view engine to get dynamic values for my table. Im not really sure how I'd go about creating the off canvas side bar. Im guessing I…
ryan
- 69
- 1
- 9