Magento – Remove Default header and create new one with menu and search bar

blocksheadermagento2menusearch

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!

Best Answer

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

Related Solutions

Magento 2 Layout – Create New Page Header Section

I had similar frustrations when trying to customise my theme which was extending the blank theme. I've now opted to create a fresh theme that does not inherit from a parent theme and I've found it far easier to manipulate. The difficulty is no doubt due to the fact I don't yet fully understand the underlying architecture and how it works. However, this is what I have done using the '//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>
        <!-- Remove Blocks -->
        <referenceBlock name="report.bugs" remove="true"/>
        <referenceBlock name="header.container" remove="true"/>
        <referenceBlock name="catalog.topnav" remove="true"/>
        <referenceBlock name="footer" remove="true"/>

        <referenceContainer name="page.wrapper">
            <container name="custom.header" htmlTag="header" htmlClass="header">
                <block class="Magento\Framework\View\Element\Template" name="row" template="Magento_Theme::html/row.phtml">
                    <block class="Magento\Framework\View\Element\Template" name="header.column1" template="Magento_Theme::html/header/column1.phtml" before="header.column2"/>
                    <block class="Magento\Framework\View\Element\Template" name="header.column2" template="Magento_Theme::html/header/column2.phtml" after="header.column1">
                        <block class="Magento\Theme\Block\Html\Header\Logo" name="logo" after="header.column1" />
                    </block>
                    <block class="Magento\Framework\View\Element\Template" name="header.column3" template="Magento_Theme::html/header/column3.phtml" after="header.column2"/>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

Now, whether this is considered bad practice or not, I'm not entirely sure.

Magento – Fixed Header and Mega Menu

Have you tried position:fixed in css file?

frontend/Magento/luma/en_US/css/styles-l.css

Best Answer

Related Solutions

Magento 2 Layout – Create New Page Header Section

Magento – Fixed Header and Mega Menu

Related Topic