Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
I created a new block with HTML and CSS from Admin Panel in Magento 2.2.5.
I want to display this block as a header of my store, so I want the method to remove or hide the default header and also how to add the Menu and Search bar to my new header block.
Magento 2.2.5 Luma Theme.
Thanks!
You just have to put the content of your new header in your current theme, Magento will take it first (Magento Fallback system), you don't need to remove it.
your header content will be in :
app/design/frontend/{Vendor}/{theme}/Magento_Theme/templates/html/header.phtml
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>
