1

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.

enter image description here

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.

  • @subkuch have you got any solution? – Piyush Apr 8 at 13:54
0

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>
  1. Flush your caches and reload the page. It should init the menu with all levels collapsed by default, according to the documentation.
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.