3

I would like to put the top links (Login, Create Account, Log out, ...) to my navigation bar. Any idea how?

Improve this question
4

What we need to do

To move a block you need to use the <move> XML instruction, the official docs for this can be found here

Finding the block name

To move a block you first need to find out the block name, in this case I searched for header links within magento2/app as I know these css classes are added via the XML. This gives me 2 results:

app/design/frontend/Magento/luma/Magento_Theme/layout/default.xml

And

app/code/Magento/Theme/view/frontend/layout/default.xml

If you search these 2 XML files for header links you will see where the blocks are called and the name passed to it. Which file you need depends on your fallback structure, if you're falling back to Luma view the first file, if you're falling back to the blank theme use the second file.

My theme is using the blank theme so I can see the block name is top.links, this is on line 50 of app/code/Magento/Theme/view/frontend/layout/default.xml (If your theme is falling back to Luma I believe the block name is header.links).

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

Moving the block

Now we know the class name we can move the block, in my example I have moved the block to the footer. As I want this to happen on every page I have added the below code to 

app/design/frontend/*MY_STORE_NAME*/*MY_THEME_NAME*/Magento_Theme/layout/default.xml.

<move element="top`.links" destination="footer_links" />

It's important to add this to your own theme and not overwrite Magento's code.

Result

My XML code now looks like so:

<?xml version="1.0" ?>
    <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="top.links" destination="footer_links" />
    </body>
</page>

Which renders the links in the footer on the front end:

enter image description here

I hope this helps.

Update 1 - Above the nav

To move the links above the nav this is the only line of code required.

<move element="top.links" destination="page.top" before="-" />

Update 2 - In the nav

To add the links inside the nav I think your options are to hardcode them by adding vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml to your theme and adding the links you require there.

Or if you need them to be dynamic then you'll beed to do some back-end work to give the Magento\Theme\Block\Html\Topmenu block class the ability to check and render account links depending on if the user is signed in. I'm not a back-end dev so I can't help much with this method, if you choose to go down this method the following files may help you out:

- vendor/magento/module-theme/view/frontend/layout/default.xml
- vendor/magento/module-customer/view/frontend/layout/default.xml
- vendor/magento/module-customer/view/frontend/templates/account/link/authorization.phtml
- vendor/magento/module-theme/view/frontend/templates/html/topmenu.phtml

 Update 3 - Add to the same section as the logo and search bar

To find the name of the section that contains the logo and search bar I searched Magento's XML files for the classes used on their parent container which are header content. This returns the following code in vendor/magento/module-theme/view/frontend/layout/default.xml:

<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">

So we can see the container name is header-wrapper meaning we can use the below code to move our element there:

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

You can position it where you want with before and after.

Improve this answer
  • This works but how do you move the header links to the navigation bar? Or right above the navigation bar? – Luis Garcia May 17 '16 at 22:03
  • I have added 2 updates to my answer, one explains how to add them above the nav bar, and the other gives some assistance in how to add them inside the navigation. – Ben Crook May 18 '16 at 12:43
  • Thanks. Could you explain how to move the same links to the area where the logo and search bar are located? I've tried to change the destination value in this line: <move element="top.links" destination="page.top" before="-" /> but I haven't found the way to position the links in that area, just above the search bar and below the original position in Blank theme. In other words, they are inside the <div class ="panel wrapper">, and I want to take them out from there to the area above the search bar. – Luis Garcia May 18 '16 at 17:04
  • I've included that into my answer now (update 3) - the destination should be header-wrapper. – Ben Crook May 19 '16 at 6:52
  • Thanks! I think this should be marked as the best answer @Omitri. Regarding the header links, in their original position the links dont have bullets, but when I moved them to header-wrapper, bullets appear in each link. And if I move them to footer_links bullets dont appear. – Luis Garcia May 19 '16 at 16:30

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.