Magento – Move the “action nav-toggle” block into the “header.panel” on Magento 2

hamburger-menulayoutluma-thememagento2

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?

Best Answer

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:

[Vendor]/[Theme]/Magento_Theme/templates/html/header/logo.phtml

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

[Vendor]/[Theme]/Magento_Theme/templates/nav-toggle.phtml

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

[Vendor]/[Theme]/Magento_Theme/etc/layout.xml

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.