Magento 2 – Move Top Links in Same Container as Logo

magento-2.1magento2toplinks

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?

Best Answer

  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.