Do you create separate .html files for each offcanvas menu or do you just put them above the header on index.html above the nav bar?
And what is the best practice when the nav bar has a shopping cart icon available on every page of the site when you want the offcanvas shopping cart list to slide in from the side?
Thanks for any tips.
Use Master pages for your site wide navigation and footers. (make sure to set all your meta tags as editable, so you can customise them per page.)
Offcanvas elements sit outside of the DOM flow, so they can be anywhere. But really it makes sense to keep it with the navbar and include it in your master page.
Add this to your browser favourites 
Hi.
So Iâm confused. Iâve looked at the Bootstrap site and a few other places and Iâm not sure Iâm getting it.
Here is the code Iâm using in HTML, there is no CSS at the moment.
<section id="main-menu" class="top-menu-section">
<div class="offcanvas offcanvas-top" tabindex="-1" id="sidebar_top" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title text-black" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body text-black">
<div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
</section>
As soon as I add the class âoffcanvasâ to the div on line 3, the entire thing vanishes from view in Pinegrow. Which means I can no longer use Pinegrow to lay it out and format it.
So does this mean I have to lay it all out and format it first and THEN add the âoffcanvasâ class which hides it?
Toggle the offcanvas open with your hamburger and edit / design it in Pinegrow.
I think you misunderstood. I am toggling it with my hamburger.
Just that in PG I cannot see anything on the canvas for the âoffcanvasâ element if the html tag has the class âoffcanvasâ in it.
Toggle it open in Pinegrow. click on your hamburger, if you have set up the offcanvas correctly it will open.
Offcanvas is hidden by default, remember this isnât Blocs, JavaScript runs in Pinegrow (unless you turned it off. Which you can with the top icons)
I have the JS icon on the top bar turn on (green).
Here is what I see if the html class for the offcanvas elements has âoffcanvasâ in them:
This means I canât âeditâ/âstyleâ them in PG if I have that class (correctly) set in the HTML.
But, if I remove the âoffcanvasâ from the class lists this is what I see.
Which means I âcanâ style them, however their layout isnât correct (offcanvas-header is wrong).
This isnât about toggling them, or running the page in the browser, this is about using PG and styling them, but that leads onto another problem: they are taking up space on the page (when running in the browser) that they shouldnât be.
Of course its missing the offcanvas class, which will effect it.
Iâve finished for the day, but Iâve made piles of offcanvas menus in Pinegrow, and never had this issue, so double check everything, something is not right.
and yes, this does including toggling, because you need to toggle the offcanvas in Pinegrow to see it, so you can edit it. You shouldnât need to remove a class to do that
Are you saying I need to toggle it inside pinegrow, so that I can see it and style it - and youâre not talking about toggling it when running the site in a browser?
Oh.
Okay, Iâll look into that.
As regards to why itâs taking up page space, is that another misunderstanding or is that an error in my code do you think?
Okay, I understand the toggling now. Thank you. I didnât know I could do that inside PG. Fantastic. Thanks for bearing with me as I failed to understand you.
I still have to fix the offcanvas menus using up page space thoughâŚ
Yes 
Iâm assuming from your first image when itâs closed there is space being taken up in the layout? I donât know whatâs that about, canât see much.
This is a great interaction and explanation both!
Thanks, I just learnt about
âoff canvasâ
Class usage in Pinegrow myself.
Thanks, very helpful
IM also flummoxed trying to do this.
So I had a look around and found this Bootstrap tutorial, interactive site with code sandbox nice/helpful.
and they have a section of off canvas too.
Iâm not sure if its mostly for 'material designâ stuff. I shall check out later.
Horses now 
So I found that if I make some CSS for:
/* OFFCANVAS MAIN MENU */
.offcanvas.offcanvas-top {
font-family: 'Comfortaa', sans-serif;
color: white;
background-color: var(--clr-brand);
position: fixed;
z-index: 2;
padding-top: 120px;
height: 100vh;
transition-duration: 500ms;
}
/* OFFCANVAS CHECKOUT */
.offcanvas.offcanvas-end {
font-family: 'Comfortaa', sans-serif;
color: white;
background-color: var(--clr-brand);
position: fixed;
z-index: 2;
height: 100%;
padding-top: 120px;
top: 0px;
left: auto;
}
then the issue of them taking up âspaceâ on the page goes away.
Happy Days!
It works out of the box with the bootstrap classes. You shouldnât have to do that, which suggests you do have CSS somewhere effecting it.