How to Use OffCanvas Mobile Menu

[Support]

This feature works on Porto 12.0.0 +

If you want to use the OffCanvas Menu here’s what you need to do:

1) Add the attribute data-clone-element-to="#offCanvasLogo" to the header-logo div:

2) Find the button with class = “header-btn-collapse-nav” and replace with this one:

<button class="btn header-btn-collapse-nav" data-bs-toggle="offcanvas" href="#offcanvasMain" role="button" aria-controls="offcanvasMain">
	<i class="fas fa-bars"></i>
</button>

3) Add the OffCanvas HTML right before BODY tag close (end of the HTML file):

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasMain" aria-labelledby="offcanvasMain">
	<div class="offcanvas-header">
		<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
	</div>
	<div class="offcanvas-body">
		<div class="mb-4" id="offCanvasLogo"></div>
		<nav class="offcanvas-nav w-100" id="offCanvasNav"></nav>
	</div>
</div>

* You can add more content inside the offcanvas-body DIV, but keep the NAV and the div with id=offCanvasLogo there.

Result:

---

• This topic was modified 3 weeks, 5 days ago by Support.

[Author]

Posts