I have been experimenting on an offcanvas menu based on the code example from getbootstrap (Navbar · Bootstrap v5.3)
I copied the code from the site and pasted into a custom code which was then converted to components in bss.
It all works fine, but when I go to change the text of a nav-link then the whole page is greyed out and the only thing selectable is the body.
Anyone have any ideas?
<nav class="navbar navbar-expand-lg fixed-top bg-body-tertiary">
<div class="container-fluid"><a class="navbar-brand" href="#">Offcanvas navbar</a><button class="navbar-toggler" data-bs-toggle="offcanvas" type="button" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="offcanvasNavbar" class="offcanvas offcanvas-end show visible" tabindex="-1" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 id="offcanvasNavbarLabel" class="offcanvas-title">Offcanvas</h5><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav flex-grow-1 justify-content-end pe-3">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" aria-expanded="false" data-bs-toggle="dropdown" href="#" role="button"> Dropdown </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider" />
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
.fixed-top is preventing it.
@twinstream, thanks but i’ve already tried without.
The only solution I’ve found so far is to select the offcanvas in the overview panel
then click on hide
On the navbar set in options Position to Default. Also of course remove the show visible to start on the Offcanvas so it toggles. Working here…
If you set the navbar to position default then the page will scroll to the top when you close the offcanvas. If your links point to an anchor down on the page then the page first scroll to the anchor, but when you close the offcanvas the page will scroll to the top or somwhere in between the anchor and the top.
The code itself works as it should in the browser, it is designed so that the offcanvas only works on < LG devices, with a normal navbar along the top on large and above.
The problem is that it is uneditable in bss (see video)
I have sent you a solution to the problem
1 Like
@richards Add this to your header
.fixed-top {
z-index: 1041;
}
1 Like
Thank you @twinstream works perfectly
I found this which indicates index-fixed sits below the index-offcanvas-backdrop and index-offcanvas.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-offcanvas-backdrop: 1040;
$zindex-offcanvas: 1045;
$zindex-modal-backdrop: 1050;
$zindex-modal: 1055;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
$zindex-toast: 1090;
5.3 Z-index umm ok I guess that is supposed to make sense but I am struggling with this one ?
1 Like
@twinstream and @kuligaposten thank you both for your help today, I would say I was pulling my hair out, but I don’t have enough to pull out anymore 
The z-index on the fixed top worked to a point, but then I realised that only the navbar was editable so back to the drawing board.
Kuligaposten had suggest and sent me a solution which involved the offcanvas being outside of the navbar and the navbars being a linked element in both the nav and offcanvas. This was working great, but as the navbar itself would be a linked element across pages wasn’t workable.
My Solution:
<header><!--This will be a linked component across pages-->
<nav class="navbar navbar-expand-md bg-body">
<div class="container-fluid"><a class="navbar-brand" href="index.html">Brand</a><button class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" type="button" aria-controls="offcanvasNavbar" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div id="mainnavwrapper" class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto">
<li class="nav-item"><a class="nav-link active" href="#">First Item</a></li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">Dropdown </a>
<div class="dropdown-menu"><a class="dropdown-item" href="#">First Item</a><a class="dropdown-item" href="#">Second Item</a><a class="dropdown-item" href="#">Third Item</a></div>
</li>
<li class="nav-item"><a class="nav-link" href="#">Second Item</a></li>
<li class="nav-item"><a class="nav-link" href="#">Third Item</a></li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<div id="offcanvasNavbar" class="offcanvas offcanvas-end navbar" tabindex="-1">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Title</h5><button class="btn-close" type="button" aria-label="Close" data-bs-dismiss="offcanvas"></button>
</div>
<div id="offcanvasnav" class="offcanvas-body"></div>
</div>
</header>
With javascript to ‘inject’ the navbars into the offcanvas:
window.addEventListener('load', function() {
// Get the content of the "mainnavwrapper" div
const mainNavContent = document.querySelector('#mainnavwrapper').innerHTML;
// Add the content to the "offcanvasnav" div
document.querySelector('#offcanvasnav').innerHTML += mainNavContent;
});
and a bit of css to tidy it up:
#offcanvasnav,
.offcanvas-header {
width: 100%;
}
@richards I am able to edit on mobile and desktop the rest of the page as long as I close the offcanvas ?
Yes, the offcanvas doesn’t open in bss, if you’re editing on the mobile size in bss it opens as a normal menu.
I think since the backdrop for the offcanvas is created dynamicaly using the Bootstrap javascript, BSS is going to have to set the Offcanvas backdrop to a lower z-index for editing.
.offcanvas-backdrop {
z-index: 1029;
}
There is no need, as the offcanvas exists in the html and only the navbar is dynamically created.
Although your message did remind me to turn off the z-index on the fixed-nav
