How do I create a custom header in Magento 2 using HTML and CSS

Pixell picture Pixell · Sep 16, 2016 · Viewed 10.1k times · Source

I want to make a custom header for my theme in Magento 2. I managed to create a working module which just outputs "Hello World" right now and gets displayed in the header section of my shop. Now, how do I remove the old header panel and tell my new one how to look like? I got really confused how Magento uses CSS and LESS or HTML. Can I use HTML code at all? I have a normal HTML website with a link to my Magento shop. I want a smooth transition which means I want my header in Magento look exactly like the one on my "normal" website. How do I achieve that? I have no idea where to start.

Answer

Manthan Dave picture Manthan Dave · Oct 12, 2016

You need to create your custom header layout and design in App/design/frontend folder then you need to override your custom header to default custom header by writing the code in default.xml file.

Refere below urls for more details :

https://magento.stackexchange.com/questions/102468/remove-header-part-and-add-new-header-from-my-custom-module-magento-2-0-1

https://magento.stackexchange.com/questions/113969/creating-custom-header-extending-magento-blank-in-magento-2

http://www.dckap.com/blog/add-custom-header-footer-links-magento-2/