Posted on

Magento 2.2.2 – Move custom navigation into header-wrapper in XML and make it responsive

Below xml adds custom navigation before category. To make it responsive I have included it under block navigation.sections.

<referenceBlock name=”navigation.sections”>
<arguments>
<argument name=”group_name” xsi:type=”string”>navigation-sections</argument>
<argument name=”group_css” xsi:type=”string”>nav-sections</argument>
</arguments>
<block class=”MagentoFrameworkViewElementTemplate” name=”sub.nav” group=”navigation-sections” template=”Magento_Theme::html/header_links.phtml”>
<arguments>
<argument name=”title” translate=”true” xsi:type=”string”>Sub Nav</argument>
</arguments>
</block>
</referenceBlock>

But now it break my HTML structure as I want this custom block to be inside header.wrapper and at the same time responsive. I tried below but its not working

<move element=”sub.nav” destination=”header-wrapper” after=”logo”/>

Although navigation.sections can be moved into header and its responsive too.

<move element=”navigation.sections” destination=”header-wrapper” after=”logo”/>

If I change referenceBlock to header.wrapper, the navigation goes inside header but then it is not working for responsive mode. How do I move my custom navigation inside header.wrapper and make it responsive also ?

Leave a Reply

Your email address will not be published.