I've done a new magento 2 theme, using same files from luma theme, with blank parent theme. Now what I'm trying to do, is to move the "action nav-toggle" element, basic the hamburger toggle icon on mobile, into the "header.panel" destination. What I can't do, is find the right name for the "action nav-toggle" so I can do the right code, I have already tried:

<move element="toggle.nav" destination="header.panel" before="-" />
<move element="toggle-nav" destination="header.panel" before="-" />
<move element="nav-toggle" destination="header.panel" before="-" />
<move element="nav.toggle" destination="header.panel" before="-" />
<move element="action.nav-toggle" destination="header.panel" before="-" />
<move element="action.nav.toggle" destination="header.panel" before="-" />

but non of them works, any idea what it might be?


I know this question is kind of old but it showed up in some Google results when I was trying to do the same thing, so here is what I did to get this working.

In your custom theme, copy the logo.phtml file from Magento_Theme to:


Cut the .nav-toggle element out of that file and placed it into a new template file:


This new file should have just one line:
<span data-action="toggle-nav" class="action nav-toggle"><span><?= /* @escapeNotVerified */ __('Toggle Nav') ?></span></span>

Now in your Magento_Theme layout file


You can put the following: <referenceContainer name="header.panel"> <block name="nav.toggle" before="-"> <arguments> <argument name="template" xsi:type="string">Magento_Theme::nav-toggle.phtml</argument> </arguments> </block> </referenceContainer>

Clear your caches, and your pub/static/frontend/ and var/view_preprocessed/ directories and you should be good to go.

| 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.