How to move existing links and add new custom links in top header?

magento.stackexchange https://magento.stackexchange.com/questions/299257

Question

I already check many answers regarding the move header.links to header-wrapper its working but the problem is that it also move my custom links to header content.

I am trying to create a new container which has a parent header.links, but its not working.

here is my default.xml

     <referenceContainer name="header.links">
        <container name="custom-content" as="custom-content" label="Page Custom Content" htmlTag="div" htmlClass="custom-content" />
    </referenceContainer>
    <container  name="custom-content" >
        <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="false">Contact Us</argument>
                <argument name="path" xsi:type="string" translate="false">contact-us</argument>
            </arguments>
        </block>
        <block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" after="contactus.link">
            <arguments>
                <argument name="label" xsi:type="string" translate="false">About Us</argument>
                <argument name="path" xsi:type="string" translate="false">about-us</argument>
            </arguments>
        </block>
        <block class="Magento\Framework\View\Element\Html\Link" name="customerservice.link" after="customerservice.link">
            <arguments>
                <argument name="label" xsi:type="string" translate="false">Customer Service</argument>
                <argument name="path" xsi:type="string" translate="false">customer-service</argument>
            </arguments>
        </block>
    </container >
    <move element="header.links" destination="header-wrapper" />

First I create new container custom-content then I move existing links like Sign in, Create an account link & Greeting message to header-wrapper and then define my custom link into my custom container, but its not working.

if I remove custom container then move is working fine.

Was it helpful?

Solution 3

Without creating a custom container, it can be done

add code into default.xml

<head>
    <css src="SimpleMagento_HeaderChange::css/custom.css" />
</head>
<body>
    <referenceBlock  name="header.container" >
        <container name="header.panel" htmlClass="panel wrapper" htmlTag="div" >
            <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" >
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">Contact Us</argument>
                    <argument name="path" xsi:type="string" translate="false">contact-us</argument>
                    <argument name="class" xsi:type="string" translate="false">custom-link</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" >
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">About Us</argument>
                    <argument name="path" xsi:type="string" translate="false">about-us</argument>
                    <argument name="class" xsi:type="string" translate="false">custom-link</argument>
                </arguments>
            </block>
            <block class="Magento\Framework\View\Element\Html\Link" name="customerservice.link" >
                <arguments>
                    <argument name="label" xsi:type="string" translate="false">Customer Service</argument>
                    <argument name="path" xsi:type="string" translate="false">customer-service</argument>
                    <argument name="class" xsi:type="string" translate="false">custom-link</argument>
                </arguments>
            </block>
        </container>
    </referenceBlock >
    <move element="header.links" destination="header-wrapper" before="-"  />
</body>

Add CSS for improving UI.

OTHER TIPS

You have defined "custom-content" as Container and you are trying to add links via <referenceBlock name="custom-content"> which is wrong .

Use 

 <referenceContainer name="custom-content">

Could you please try following code.

    <container name="custom-content" as="custom-content" label="Page Custom Content" htmlTag="div" htmlClass="custom-content">
        <!-- Contact us Link -->
        <block class="Magento\Framework\View\Element\Html\Link" name="contactus.link" after="register-link">
            <arguments>
                <argument name="label" xsi:type="string" translate="false">Contact Us</argument>
                <argument name="path" xsi:type="string" translate="false">contact-us</argument>
            </arguments>
        </block>
        <!-- CMS Page Link Link -->
        <block class="Magento\Framework\View\Element\Html\Link" name="aboutus.link" after="contactus.link">
            <arguments>
                <argument name="label" xsi:type="string" translate="false">About Us</argument>
                <argument name="path" xsi:type="string" translate="false">about-us</argument>
            </arguments>
        </block>

        <!-- CMS Page Link Link -->
        <block class="Magento\Framework\View\Element\Html\Link" name="customerservice.link" after="customerservice.link">
            <arguments>
                <argument name="label" xsi:type="string" translate="false">Customer Service</argument>
                <argument name="path" xsi:type="string" translate="false">customer-service</argument>
            </arguments>
        </block>
    </container>
<move element="custom-content" destination="header.links" />

And don't forgot to clear cache.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top