level 2 menu is not collapsing on mobile (Magento 2.3 Parent theme-Luma)

Question

I have created a three-level menu using Magento Admin It works great on desktop. But the third level menu is not collapsing on mobile view. Please check the image. Yellow highlighted links are the second level menu.

Here is what I need help with: First of all, second level menu should be in collapsed mode. And, when "Painting" is clicked on mobile, it should open up the third level menu items (Oil, Acrylic, Watercolor and so on) + "All Paintings " button on top just like how "All Collections" button is shown.

Answer 1

The Magento menu is initialised with the sub-menus expanded on mobile by default. To change this:

1. In your custom theme, create an override for the core topmenu.phtml template file, e.g., app/design/frontend/<customtheme>/default/Magento_Theme/templates/html/topmenu.phtml

2. Copy the content of the original file from vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml and remove "expanded":true from data-mage-init (below sample is from Magento v2.3.3):

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

/**
 * Top menu for store
 *
 * @var $block \Magento\Theme\Block\Html\Topmenu
 */

$columnsLimit = $block->getColumnsLimit() ?: 0;
$_menuHtml = $block->getHtml('level-top', 'submenu', $columnsLimit)
?>

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <?= /* @noEscape */ $_menuHtml?>
        <?= $block->getChildHtml() ?>
    </ul>
</nav>

3. Flush your caches and reload the page. It should init the menu with all levels collapsed by default, according to the documentation.