How can I lock the scrolling of the body when the burger menu is clicked in Webflow and ensure that it unlocks when the menu is closed?

To lock the scrolling of the body when the burger menu is clicked in Webflow, you can use custom code combined with some interactions. Here's how you can achieve it:

1. Create a new HTML embed element:
- Drag and drop an HTML embed element onto your Webflow page, preferably inside the Navbar Symbol or inside a Div block that contains the burger menu.
- Make sure to position the HTML embed element as a sibling to your Navbar or the container of the burger menu.

2. Add JavaScript code to lock scrolling:
- Double-click the HTML embed element to open its settings.
- Click on "Edit Code" and enter the following JavaScript code:

```javascript

```

3. Add Interactions to the burger menu:
- Select your burger menu button or element and go to the Interactions panel.
- Add a new interaction triggered on the click event.
- Choose "Run JavaScript" as your animation type and enter the following code:

```javascript
toggleMenu();
```

4. Create an overlay element:
- Add a new Div block as a sibling to the Navbar Symbol or the container of the burger menu.
- Give it a class name, such as "overlay".
- Style the overlay to cover the entire viewport with a semi-transparent background color.
- Set the display property to none.

That's it! Now, when the burger menu is clicked, the JavaScript code will lock the body scrolling by setting the body's position to "fixed" and hiding the scrollbars. It also saves the current scroll position to restore it when the menu is closed. The overlay element helps in blocking any interaction with the content beneath.

When the menu is closed, the JavaScript code will unlock the body scrolling by setting the body's position, overflow, and top properties back to their original values and restore the saved scroll position.

Note: Remember to publish your site for these changes to take effect.