Adding Drop-Down Arrows to the Menu

[naturalflow]

Hello, I hope I am posting this in the proper area.

I am working on adding more menu items to my CATEGORY section. However, if I do this, I fear the CATEGORY section will get unnecessarily long. As you can see below, I've added the menu item FOOD to come below FOOD & DRINK.

I am wondering if there is a way to make the PC version like the smart phone version. In this version, you can collapse and expand the section by clicking on the arrow.

 

I apologise if I am not clear enough of what I would like to do. Please let me know if you need further information!

Website: https://j-beautynatural.com/

[Small_Task_Help]

Hi,

Hope this will help

- Edit your navigation code
- Add Drop-Down Arrow
Code example

<ul class="menu">
  {% for link in linklists.main-menu.links %}
    <li class="{% if link.links != blank %} has-submenu {% endif %}">
      <a href="{{ link.url }}">{{ link.title }}</a>
      {% if link.links != blank %}
        <span class="dropdown-arrow">▼</span>
        <ul class="submenu">
          {% for sub_link in link.links %}
            <li><a href="{{ sub_link.url }}">{{ sub_link.title }}</a></li>
          {% endfor %}
        </ul>
      {% endif %}
    </li>
  {% endfor %}
</ul>

- Add css for style
- Add JavaScript for Click to Expand

Javascript example

document.querySelectorAll('.dropdown-arrow').forEach(arrow => {
  arrow.addEventListener('click', function(event) {
    event.preventDefault();
    let submenu = this.nextElementSibling;
    submenu.style.display = submenu.style.display === "block" ? "none" : "block";
  });
});

[naturalflow]

Thank you so much for your message!

If I were to add these codes, where would I add them?