How to link a button to open the hamburger menu (desktop)?

Ask the community
, ,
1

Question:
Is there a (simple) way to link a button to open the hamburger menu (desktop)? I don’t have that choice to link to the menu when trying to add a link to my button.

Already searched the web to no avail.

Product:
Wix Studio

What are you trying to achieve:
Besides having the hamburger menu open on click, I want to link a button on a page to open the menu as well. Basically it’s for a map that I want to have under the menu that gets linked to a section on the page (via a button).

Additional information:
Don’t want to use a lightbox for the map, thinking it would be nice to use the sliding out menu for it.

2
  • The ID of your custom button is #openMenuButton.
  • The ID of the hamburger menu button is #hamburgerMenuButton.
  • The ID of the target section is #targetSection.

Here’s how you can implement this:

  1. Assign IDs:
  • Ensure the custom button has the ID #openMenuButton.
  • Ensure the hamburger menu button has the ID #hamburgerMenuButton.
  • Ensure the target section has the ID #targetSection.
  1. Add the following code to your site’s code:
$w.onReady(function () {
    // Add click event to the custom button
    $w("#openMenuButton").onClick(() => {
        // Trigger click event on the hamburger menu button to open the menu
        $w("#hamburgerMenuButton").click();

        // Navigate to the target section
        $w("#targetSection").scrollTo();
    });
});

Tell if its works for you.

3

Hi, thanks so much for the detailed response!

  • I assigned #openMenuButton as ID of my custom button I want to use to open the hamburger menu.
  • I gave the hamburger menu icon the ID #hamburgerMenuButton
  • Though I prob don’t need a target section to scroll to, I assigned the element in the menu the ID #targetSection

Unfortunately, when adding the code you provided, the “click” command in the line “$w(”#hamburgerMenuButton").click();" is red underlined and of course code doesn’t produce anything.

Perhaps I misunderstood the naming convention of the ID assignments?

:thinking:

4

Hey Milan,

Try this:
https://dev.wix.com/docs/velo/api-reference/$w/hamburger-menu-container/open

5

Hi Pratham,
Thanks for the link, but I’m not a coder and am not sure how to implement this snippet for it to work.
Can you elaborate a bit more please? Thanks!!!

6

Navigate to the page where you have located your HAMBURGER-MENU.

Paste the following code to your selected page…

$w.onReady(()=>{console.log('Page is ready...');
    $w('#btnOpenHamMenu').onClick(()=>{$w("#hamburgerMenu").scrollTo();
         if ($w("#hamburgerMenu").opened) {$w("#hamburgerMenu").close();}
         else {$w("#hamburgerMenu").open();}
    });         
});
7

Sure, simply replace all the code you have on the page with this:

$w.onReady(function () {
    $w('#openMenuButton').onClick(() => {
        $w("#menuContainer1").open();
    });
});
1 Like
8

@Pratham Perfect!!! Thank you so much :slight_smile:

Thanks also to everyone else for chiming in!

1 Like