0

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 Menu and Search bar to my new header block.

Magento 2.2.5 Luma Theme.

Thanks!

  • please check my answer :-) – Divyesh Sep 3 '18 at 11:08
0

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
0

The header is the first thing that people will see when they land on your site. Add 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 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 customheader.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/customheader.phtml Here you can customise 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 searh and minicart 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 look 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>

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.