Questions tagged [off-canvas-menu]

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.

109 questions
0
votes
0 answers

How to HTML Button follow move offcanvas Boostrap 5

I have code for scrolling canvas and that just work. And I put the Button at right side just cover when I press the other button for running scrolling canvas. I will the button still show follow the scrolling canvas, when that open and close. this…
Mainboard
  • 1
  • 2
0
votes
1 answer

Focus always goes to link on OffCanvas component

I have a script that gives the focus to a specific element in a popped up div when pressing the down key in a textbox. Worked well until I added a sidebar navigation pane using an Bootstrap offcanvas component. Now, even though the script still does…
Atchoum
  • 703
  • 8
  • 16
0
votes
0 answers

How Could I use setTimeout to open an offcanvas Bootstrap 5 and then close it the normal way?

today my problem is that I couldn't hide my offcanvas when used with a setTimeout function. /* Main scripts */ window.addEventListener("DOMContentLoaded", () => { const offcanvas = document.getElementById('offcanvasMenu') …
0
votes
1 answer

How can i show last opening offcanvas at the top?

The problem is offcanvas3 opens behind offcanvas2. Like that $("#open-offcanvas2").on("click", function(){ $("#offcanvas2").offcanvas("show") }) $("#open-offcanvas1").on("click", function(){ …
Yahya Altintop
  • 204
  • 2
  • 12
0
votes
0 answers

open Collapse sidebar with same DB id

I'm currently working on the forum section of my website. I followed the link @CBroe suggest me on the comments and implemented offcanvas for my previous problem and now I have this: …
tato
  • 1
  • 2
0
votes
0 answers

BootStrap Off Canvas Anchor

I'm using Off Canvas from Bootstrap and have anchor tags inside the off canvas. Whenever I click on the link, it does scroll down at the back, but the moment I close the Off Canvas, it scrolls back up from where it started. I don't understand why…
0
votes
0 answers

Add Pull Tab/Button for Bootstrap 5 OffCanvas

Is there a way (html/css only - without using extra javascript) to add a little 'pull-tab' button that triggers a vanilla Bootstrap 5 offcanvas side menu? I want to use the standard offcanvas demo like here…
Mike Smith
  • 618
  • 10
  • 27
0
votes
0 answers

how to call a function of another component in react js

I have a NavMenu component class like this: import React, { Component } from "react"; import { Navbar, NavItem, NavLink, OffcanvasBody } from "reactstrap"; import "./styles/NavMenu.css"; import Offcanvas from "react-bootstrap/Offcanvas"; export…
0
votes
1 answer

Offcanvas component doesn't work, Content doesn't show up

I hope you are fine! I have a challenge for you :). I'm trying to implement a Offcanvas Component in my Angular Project, and it's look to work, but when i activate the component shows only the shadow effect and not the content. I'm working with…
Strazzzu
  • 1
  • 1
0
votes
1 answer

how to enable hover on an element outside the selected element?

I made this simple menu below, but I would like to make it more interactive for the user, inserting a hover when hovering both the icon when the menu is closed, and writing and the icon at the same time when the menu is open. I tried to apply the…
0
votes
0 answers

How to close the bootstrap offcanvas when route changes?

I've used the simple bootstrap 5 offcanvas menu not the react-bootstrap offcanvas. I want the offcanvas to toggle itself when we click on any of the item or in other words when the route changes. how can I achieve this in a functional…
0
votes
0 answers

Off-Canvas Menu Css

I'm following https://www.w3schools.com/howto/howto_js_off-canvas.asp to create an off-canvas menu. I was wondering how to change it opening from the left and pushing content towards the right and instead opening from the bottom and pushing content…
user19569395
0
votes
1 answer

How can I remove the dark line around my menu button?

I am creating a C# Razor project using Bootstrap 5.1.3 and a custom menu button. Basically, I am using a custom button with an icon to open an offcanvas menu and when this menu is closed a horrid line around the button is visible. A click away (lost…
0
votes
1 answer

Inline event handler in Vue.Js with dots in the name

I am building a SPA using the latest versions of Vue.js 3 and Bootstrap 5. In the main page I am using the Boostrap Offcanvas element with a code that is very similar to the one in the documentation. The offcanvas definition looks like this
prenone
  • 302
  • 2
  • 20
0
votes
1 answer

When I try to click on anything in offcanvas bootstrap5 it closes, just like when I click outside the offcanvas

When I click the button the off-canvas popup but when I click on it, it closes just like when I click outside of it