cancel
Showing results for 
Search instead for 
Did you mean: 

Adding top links to mobile hamburger menu

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

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>