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?

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

4 Answers 4

Reset to default
1

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
2
  • 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
    Commented Mar 17, 2017 at 10:34
  • This worked for me! Just had to make the navigation container inline-block with css and it worked perfect!
    – oompahlumpa
    Commented Aug 11, 2020 at 16:18
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
1

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

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.