cancel
Showing results for 
Search instead for 
Did you mean: 

Adding top links to mobile hamburger menu

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Adding top links to mobile hamburger menu

Wondered if someone could point me in right direction:

I have custom top.links specified with the following xml in my default.xml (have also moved them to within the header.container)

 

 

<referenceBlock name="top.links">
	<block class="Magento\Framework\View\Element\Html\Link" name="Home-link">
		<arguments>
			<argument name="label" xsi:type="string" translate="true">Home</argument>
			<argument name="path" xsi:type="string" translate="true">home</argument>
		</arguments>
	</block>
	<block class="Magento\Framework\View\Element\Html\Link" name="Products-link">
		<arguments>
			<argument name="label" xsi:type="string" translate="true">Products</argument>
			<argument name="path" xsi:type="string" translate="true">kitchenware.html</argument>
		</arguments>
	</block>
	<block class="Magento\Framework\View\Element\Html\Link" name="News-link">
		<arguments>
			<argument name="label" xsi:type="string" translate="true">News</argument>
			<argument name="path" xsi:type="string" translate="true">home</argument>
		</arguments>
	</block>
	<block class="Magento\Framework\View\Element\Html\Link" name="Contact-link">
		<arguments>
			<argument name="label" xsi:type="string" translate="true">Contact</argument>
			<argument name="path" xsi:type="string" translate="true">contact</argument>
		</arguments>
	</block>
</referenceBlock>

 

 

These links appear on desktop as expected. But on mobile I want them to appear as part of the hamburger menu - how to I do this? I am sure somehow I need to include them in the nav-sections div for that to happen but can't seem to get it working when using the move element xml so am guessing I need to use a phtml file but keep going round in circles.

 

Any help would be much appreciated. 

1 REPLY 1

Re: Adding top links to mobile hamburger menu

You can edit topmenu template file under Magento_Theme/templates/html/topmenu.phtml and add links as list items with correct class names or you can try edit layout and add it as links under <nav> element in hamburger menu 

    <referenceBlock name="store.menu">
        <block class="Magento\Framework\View\Element\Html\Link" name="add-new-link-name" after="-">
            <arguments>
                <argument name="label" xsi:type="string" translate="true">link-label</argument>
                <argument name="path" xsi:type="string" translate="true">link-path</argument>
            </arguments>
        </block>
     </referenceBlock>