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:
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/
andvar/view_preprocessed/
directories and you should be good to go.