2
votes

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.

2

2 Answers

0
votes

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/

0
votes

Header files for magento is stored in app/design/frontend/package/theme/template/page/html/header.phtml . Now in that you can do your changes. Make sure you take a backup in case something goes wrong. Make sure you clear your cache when u change something in header or footer in order for that to reflect.

Now since you want to use majority of HTML and CSS for your formatting. PHTML files are basically those who use PHP and HTML. You can practically do anything in PHTML files that you will do in HTML so no worries on that part. Just remember whatever you write there will be present in all front end pages so if you write some heavy script for homepage irrespective if you require that elsewhere it will be used everywhere.

If you are new and want to learn magento development try out Magento PHP developers guide by Allan MacGregor. Its one of the best books out there. All the best.