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.