Offcanvas not closing when hash-links are clicked

How To
1

I have the new menu builder in an off-canvas. I need the off-canvas to close when I click links that contain hash-links. How do I do this? How do I let it trigger the close toggle on a link?

2

This doesn’t look like it’s possible. If you have any element, you can close the offcanvas (by adding class/aria labels - or using interactions) - but once it becomes a link - it won’t work also as a toggle.

1 Like
3

Ok, any idea what direction to think? It has been done befoe. I know OxyExtras had this in their offcanvas / menu combination. So should be doable, but I’m not sure how these menu-systems are set up differently.

4

I would email support directly… I would expect to be able to use links to close the offcanvas… so they may be able to make a tweak and fix it.

1 Like
5

You can use this snippet to close the offcanvas when you click any link inside. In my case, I needed it on a one-pager, so I just added this to the body footer scripts in the page settings. If you need it for the whole site, just add it in the custom code section of the Bricks settings.

You might have to adjust the ID of your nav unless you also always call it “Main Menu” :wink:
The two offcanvas related classes are default ones (at least in 1.81) so should be able to just leave them.

<script>
	const offcanvas = document.querySelector('.brxe-offcanvas');
	const navitems = document.querySelectorAll('#menu-main-menu a');

  navitems.forEach((item) => {
    item.addEventListener('click', (event) => {
		offcanvas.classList.remove("brx-open");
    });
  });
</script>
2 Likes
6

Hi manc.

Is this also somehow working with the new Nestable Menu? I have several Nav-Link items in there and need to trigger some of them with hash-links - to close the OffCanvas.

Renaming their IDs and replace it in Your snippet don´t seem to work.

nav-link
nav-link372Ă—600 6.37 KB

7

Try using a class that’s shared among all the links instead of the ID. You can’t have multiple identical IDs and in the nestable nav you don’t get the manu ID afaik.

So either use an existing class or add one to all the nav links and then use .your-class a

Lemme know if that works :slight_smile:

8

Seems you might not need this at all after glancing over the changelog of 1.8.3 :smiley:

1 Like
9

Think they already fixed this in the previous update. But it more or less is solved, at least I did not encounter any issues anymore.

10

Hey Joe,

“more or less”? What problems are you having?

Best,

André

11

On my Onepager the issue with not closing the offcanvas just appears to the last section, which is linked via css anchor to the main menu.

12

I’m not sure what you mean / what your problem is exactly.

13

Yeah, it works so can leave the more or less out