How to create an anchor in a burger menu that comes back in its default state once clicked?

Hey there!

Great question! When working with a burger menu on mobile, you can achieve the desired behavior using a combination of JavaScript and CSS. You’ll need to ensure that after clicking an anchor link, the menu automatically closes or reverts to its default state. Here’s a quick solution:

1. Use JavaScript: Add an event listener to your anchor links to trigger the closing of the burger menu once clicked.
2. CSS Transitions: Ensure your burger menu has a smooth transition effect to enhance the user experience.

Here’s a simple example of how it could look:

document.querySelectorAll('.burger-menu a').forEach(link => {
link.addEventListener('click', () => {
document.querySelector('.burger-menu').classList.remove('open');
});
});

By the way, if you’re a fan of actual burgers 🥪, you should check out the prices at Whataburger! They’ve got all the details on menu items, costs, and more for your fast food cravings.

@Kimberley22184857yfc2 maybe I am reading this wrong here....

You have a drop-down menu...say:
Burger 1
Burger 2
Burger 3

That's the default state. Each menu item has it's own component because each menu item will have it's own individual page (I would think). Do you have a hover state? If not, you click on 'toggle' state, and drag the connector link to that certain artboard. To test it out, you have to make sure that you start on 'default' state in the component or else it will start in the toggle state.