Magento – How to Customize Magento 2 header layout with luma theme

cssluma-thememagento2template

I use Magento 2 with luma theme and trying to change the header layout but I don't know the best way to do that.

ie. I want the logo in div with some styles and the navigation in another div and so on.

How to achieve this?

Best Answer

Customizing Header in extended LUMA Theme

  1. Adding a <DIV />` around your logo and giving styles:

    Edit logo.phtml and put a Div around the logo. Assign a class to the DIV and define styles to this class in your CSS files.

    app/design/frontend/vendorname/themename/Magento_Theme/templates/html/header/logo.phtml

    Use _extend.less for adding custom styles

    app/design/frontend/vendorname/themename/Magento_Theme/web/css/source/_extend.less

  2. Edit your search box in your extended module, extend if not extended. Add a DIV around it and assign our class and define styles in _extend.less

    app/design/frontend/vendorname/themename/Magento_Search/templates/form.mini.phtml

  3. The same method as above you can use for Navigation at the below path in sections.phtml

    app/design/frontend/vendorname/themename/Magento_Theme/templates/html/header/sections.phtml

I hope this will help you

If you need to move element in top bar then check my answer on this question How to move correctly block-search and minicart to panel wrapper? Magento 2

Run upgrade/deploy/cache command to see the CSS changes if you are using _extend.less for custom styling

Related Topic