3

I am using Magento 2.0 with a copy of the blank theme.

I am trying to get the logo, nav, and mini cart on one line but I can't figure it out.

How would I do this with the blank Magento theme?

  • What do you mean with 'one line'? – Giel Berkers Mar 16 '17 at 13:28
  • Logo to the left, navigation in middle, and cart and search to the right. – gwhitcher Mar 16 '17 at 15:27
1

Solution: Add the following to default.xml

<move element="header.panel" destination="header.panel.wrapper"/>
<move element="logo" destination="header.panel" before="catalog.topnav"/>
<move element="catalog.topnav" destination="header.panel" after="logo"/>
<move element="top.search" destination="header.panel" after="catalog.topnav"/>
<move element="top.links" destination="header.panel" before="minicart"/>
<move element="minicart" destination="header.panel" after="top.links"/>

Add the following in a custom CSS file:

.page-header {
    margin-top: 0px;
}
nav.navigation {
    max-width: 350px;
    background: #FFF;
    float: left;
}
.header.panel > .header.links {
    float: right !important;
}
div.minicart-wrapper {
    float: right !important;
}
div.block.block-search {
    float: right !important;
}
| improve this answer | |
0

To modify the HTML you need to move the navigation to the header.

For example:

<move element="catalog.topnav" destination="header-wrapper" after="logo"/>

But you will also need to do some styling to make it all work nicely together.

| improve this answer | |
  • You could add your own solution as an answer to your own question and mark it as the answer. It could help other people with a similar task. – Giel Berkers Mar 17 '17 at 10:34
0

Override the default.xml file in your custom theme's Magento_Theme/layout directory.

Move the navigation menu to header-wrapper:

<move element="navigation.sections" destination="header-wrapper" as="navigation_section" after="logo"/>
| improve this answer | |
0

To get the correct order in the HTML source:

<move element="logo" destination="header.panel" before="-"/>
<move element="catalog.topnav" destination="header.panel" after="logo"/>
<move element="top.search" destination="header.panel" after="catalog.topnav"/>
<move element="top.links" destination="header.panel" after="top.search"/>
<move element="minicart" destination="header.panel" after="-"/>

The key here is in the two elements at opposite ends. They need to be anchored there using the dash.

It's also more transparent to not mix before and after attributes for the elements following the logo, but if you want you can do so.

The answer above results in this order:

  1. top.links
  2. minicart
  3. logo
  4. catalog.topnav
  5. top.search

This is because:

  • top.links has to be before minicart and minicart after top.links
  • logo has to be before catalog.topnav and catalog.topnav has to be after logo
  • top.search has to be after catalog.topnav

The conditions are all met in the order displayed above and the logo block ends up after the minicart purely because of processing order.

| 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.