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.

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

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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