2

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>
4
  • might be easier to just hide it using css Commented Aug 16, 2017 at 0:38
  • you can use display='"false" instead of remove="true"
    – Sejal Shah
    Commented Aug 16, 2017 at 8:57
  • @SejalShah Using display="false" didn't seem to matter.
    – Brad
    Commented Aug 16, 2017 at 14:12
  • @subroutines I think you may be right. I'll post the CSS-based solution.
    – Brad
    Commented Aug 16, 2017 at 14:12

2 Answers 2

3

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;
        }
    }
}
0

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; ?>

Your Answer

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

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