Move element navigation.sections into header-wrapper in XML

Question

Guys I am trying to move the categories menu upward's. I want it to display the logo, the categories, the search bar and mini-cart at the same level.

Here is my code :

<move element="navigation.sections" destination="header-wrapper" />

Now the problem is after applying the code the categories get's moved upwards but the mini-cart get's invisible. As far i understood that the full width of the navigation bar is getting moved upwards and because of the z-index the mini cart might have been hidden.

The alignment is also not proper as I need to make the categories display at the centre.

I am using Magento 2.1.7 so the naming might be different.

I have been breaking my head on this magento for a long time but still now i am not able to understand the workflow and the templating system.

Please help

If there's any good tutorial for this please recommend in the comments. I am using Magento version 2.1.

Thank you.

Answer 1

If you need a little explanation about how templating works, lets read below. If you need more, the best is to take some time and read the Magento 2 documentation (it's really helpful, but a little boring to read), especially Layout and Templates parts : http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/bk-frontend-dev-guide.html

But just to explain briefly :

Templating is layouts and templates. Layouts contains the structure of your pages, templates contains the HTML that be displayed. Templates are not really complex to understand, so let's talk more about layouts.

There is a plenty of layout files. But at the end of things, Magento 2 interprets and compiles all of them on an big layout file.

So if you want to move a block, you have to use the "command" <move .... That be interpreted by Magento as : OK, he wants I moved the element set (element="navigation.sections") inside the destination element set destination="header-wrapper" />.

So goes on, Magento will search in all layout for the element header-wrapper and put the block navigation.sections in it. So, header-wrapper hasn't to be in the same layout than your navigation.sections.

Thanks to this command, you can move your block in another block, or in a container. To be brief, difference between the both, is that container contains block, and blocks contains HTML (through templates files).

But what happens if two blocks have the same name ? You could have two (or more) layout files with a block or container named header-wrapper. But, when Magento will interprets and compiles, he will choose one of them. No, not randomly, but in a logical order. This order, if I make no mistake, is something like :

• Magento will take the block in a core layout file by default
• But if the block is also in a custom module layout file he will take it
• Except if the block is also in the current theme layout file, so he take this one.

So by priority order (again, if I make no mistake) : Theme layout > Module layout > Core layout.

So there is always one only way to move a block in an element.

Hope that helps.