Magento 2 : Remove “Menu” Tab in Mobile Menu

Question

I need to remove the "Menu" tab in the mobile menu but keep the "Account" tab in place.

In my theme's default.xml file, I tried adding the following, but it breaks the mobile menu hamburger button. Clicking the button will no longer show the menu.

<referenceContainer name="page.top">
    <referenceBlock name="store.menu" remove="true" />
</referenceContainer>

Answer 1

This is the CSS-based solution to hide the Menu tab in the mobile menu:

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .nav-sections-items {
        .section-item-title[aria-controls="store.menu"] {
            display: none;
        }
        .section-item-title[aria-controls="store.links"] {
            background: transparent;
            border-bottom-width: 0;
        }
        #store\.links {
            display: block !important;
            margin: 0;
        }
        #store\.menu {
            display: none;
        }
    }
}

Answer 2

If you prefer to remove completely instead of hiding with CSS you can override sections.phtml

Copy

vendor/magento/module-theme/view/frontend/templates/html/sections.phtml

to your own theme

app/design/frontend/<VENDOR>/<THEMENAME>/Magento_Theme/templates/html/sections.phtml

and do a simple comparison inside the foreach like below. This will remove the menu tab completely and still keep functionality of the mobile menu.

change

<div class="section-item-title <?= $block->escapeHtmlAttr($groupCss) ?>-item-title"
 data-role="collapsible">
<a class="<?= $block->escapeHtmlAttr($groupCss) ?>-item-switch"
   data-toggle="switch" href="#<?= $block->escapeHtmlAttr($alias) ?>">
    <?= /* @noEscape */ $label ?>
</a>

to

<?php if($alias != 'store.menu'): ?>
    <div class="section-item-title <?= $block->escapeHtmlAttr($groupCss) ?>-item-title"
         data-role="collapsible">
        <a class="<?= $block->escapeHtmlAttr($groupCss) ?>-item-switch"
           data-toggle="switch" href="#<?= $block->escapeHtmlAttr($alias) ?>">
            <?= /* @noEscape */ $label ?>
        </a>
    </div>
<?php endif; ?>