The header is the first thing that people will see when they land on your site. Add a custom header to include enough information in the header to encourage customers to explore your site further.
We have created our own theme with Magento Blank as the parent theme.
Step 1:
Create a new theme folders
app/design/frontend/Vendor/theme
Step 2:
Create a default.xml file in the following path
app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml
and add the below code. Here we have added our header in the name of the custom header.phtml
<referenceContainer name="header.container">
<block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml" before="-" />
</referenceContainer>
Step 3:
Create a header template file in the following path
app/design/frontend/Vendor/theme/Magento_Theme/templates/HTML/custom header.phtml
Here you can customize your header as you need.
After clearing the cache and static content deployment, you can able to see your header. If you want to use the logo and top search and mini cart in your custom header, you have to add the below code in app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml
<move element="minicart" destination="custom_header"/>
<move element="top.search" destination="custom_header"/>
<move element="logo" as="logo" destination="custom_header"/>
In customheader.phtml you can access the logo by echo $this->getChildHtml(“logo”);
Finally, your XML code looks like
app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<!--To add custom logo-->
<referenceBlock name="logo">
<arguments>
<argument name="logo_file" xsi:type="string">images/logo.png</argument>
<argument name="logo_img_width" xsi:type="number">300</argument>
<argument name="logo_img_height" xsi:type="number">78</argument>
</arguments>
</referenceBlock>
<referenceContainer name="header.container">
<block class="Magento\Framework\View\Element\Template" name="custom_header" as="custom_header" template="Magento_Theme::html/customheader.phtml" before="-"/>
</referenceContainer>
<move element="minicart" destination="custom_header"/>
<move element="top.search" destination="custom_header"/>
<move element="logo" as="logo" destination="custom_header"/>
</body>
</page>
Your Phtml code look like
app/design/frontend/Vendor/theme/Magento_Theme/templates/html/customheader.phtml
<div id="custom-header-id"class="header">
<div class="row no-margin">
<div class="col-md-2 col-sm-3 col-xs-5 custom-logo">
<?php echo $this->getChildHtml("logo"); ?>
</div>
<div class="col-md-3 col-sm-4 col-xs-7 mobile-link">
<?php echo $this->getChildHtml('minicart'); ?>
<?php echo $this->getChildHtml("topSearch"); ?>
</div>
</div>
</div>