4

I am working on a Magento 2.1.7 shop. To achieve this, I have created a child-theme of Magento Blank.

My top links (above the logo) are:

  1. Compare Products
  2. Default welcome msg!
  3. My Account
  4. My Wish List
  5. Create an Account
  6. Sign In

I need to remove all the links except:

  1. My Account
  2. My Wish List
  3. Sign In

I want to move the 3 links above on the same block - <div class="header content"></div> - as the logo.

The logo will be floated to the left, while the 3 links will be floated to the right.

What files must I edit to achieve this?

Improve this question
4

1 Answer 1

Reset to default
7
+50
  1. Remove Compare Products link:

Theme_Root/Magento_Catalog/layout/default.xml

<referenceBlock name="catalog.compare.link" remove="true" />
  1. Remove Default welcome message:

Theme_Root/Magento_Theme/layout/default.xml

<referenceBlock name="header" remove="true" />
  1. Remove Create an Account link:

Theme_Root/Magento_Customer/layout/default.xml

<referenceBlock name="register-link" remove="true" />
  1. Move Top Links to the right container:

Theme_Root/Magento_Theme/layout/default.xml

<move element="top.links" destination="header-wrapper" after="logo" />

After these manipulations you need align blocks logo and links via CSS, with float.

  1. Create block with My Wish List:

Theme_Root/Magento_Theme/layout/default.xml

<referenceContainer name="header.panel">
    <block name="panel.top.links" class="Magento\Framework\View\Element\Html\Links" after="-">
        <arguments>
            <argument name="css_class" xsi:type="string">header links</argument>
        </arguments>
    </block>
</referenceContainer>

Theme_Root/Magento_Wishlist/layout/default.xml

<move element="wish-list-link" destination="panel.top.links" />

Write me if you need any help.

Improve this answer
4
  • Great, but I want to keep My Wish List at the top, in its initial place. How can I do that?
    – Razvan Zamfir
    Commented Dec 18, 2017 at 16:02
  • I updated my answer. Check it, please
    – Evgeny Levinsky
    Commented Dec 18, 2017 at 16:16
  • I want to turn <ul class="clearfix header links"> <li><a href="/customer/account/">My Account</a></li> <li class="authorization-link" data-label="or"><a href="/account/login/">Sign In</a> </li> </ul> into <ul class="clearfix header links"> <li><a href="/customer/account/"><i class="fa fa-user-o" aria-hidden="true"></i> My Account</a></li> <li class="authorization-link" data-label="or"><a href="/account/login/"><i class="fa fa-sign-in" aria-hidden="true"></i> Sign In</a> </li> </ul> In other words, how do I add icons?
    – Razvan Zamfir
    Commented Dec 19, 2017 at 10:03
  • In first link you can add css class on block via <argument name="class" xsi:type="string"> ... </argument> in Theme_Root/Magento_Customer/layout/default.xml. In second link you need override vendor/magento/module-customer/view/frontend/templates/account/link/authorization.phtml in your theme and adjust it.
    – Evgeny Levinsky
    Commented Dec 19, 2017 at 17:12

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.