0

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.

3 Answers 3

2

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">
1
  • Thanks for point out, but still its not working perfectly, now my custom links are in header-wrapper and header-links moved from top header but nowhere in header-wrapper Commented Dec 19, 2019 at 11:58
0

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.

3
  • nothings change, custom links are not added and existing link moved from top header but not showing in header-wrapper Commented Dec 19, 2019 at 12:01
  • then please update last line as below. <move element="custom-content" destination="header-wrapper" />
    – DJ Dev
    Commented Dec 19, 2019 at 12:10
  • now my custom links are in header-wrapper and header-links moved from top header but nowhere in header-wrapper Commented Dec 19, 2019 at 12:15
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.