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.

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">
| improve this answer | |
  • 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 – Sagar Parikh SGR Dec 19 '19 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.

| improve this answer | |
  • nothings change, custom links are not added and existing link moved from top header but not showing in header-wrapper – Sagar Parikh SGR Dec 19 '19 at 12:01
  • then please update last line as below. <move element="custom-content" destination="header-wrapper" /> – DJ Dev Dec 19 '19 at 12:10
  • now my custom links are in header-wrapper and header-links moved from top header but nowhere in header-wrapper – Sagar Parikh SGR Dec 19 '19 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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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