I'm trying to get the header to look a little like this:
I'm having a hard time with the search and mini cart buttons, it seems they're nested within header-wrapper by default and I can't seem to separate them from that container and move them around individually.
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="header.container">
<container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
<container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
<block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
<arguments>
<argument name="target" xsi:type="string">contentarea</argument>
<argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
</arguments>
</block>
</block>
<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercontact.phtml" name="headercontact"/>
</container>
</container>
<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn1.phtml" name="headercolumn1"/>
<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn2.phtml" name="headercolumn2"/>
<block class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/headercolumn3.phtml" name="headercolumn3"/>
</container>
</referenceContainer>
</body>
</page>
So - I created 3 columns inside the header-wrapper container, and then moved the top search and mini cart with CSS. Ideally I would be able to get them both into columns 1 and 3 so that I can put them in DIVS and style them but adding this to headercolumn1.phtml doesn't seem to work
<?php echo $this->getChildHtml('topSearch'); ?>
so they're both currently sitting below the columns from the header-wrapper container.
Any ideas how I can achieve this?