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?

  • have you extended your theme already ? Commented Jul 12, 2017 at 9:46
  • Yes I applied my custom theme and trying to change the layout Commented Jul 12, 2017 at 9:56
  • currently your logo coming in header content and menu in section-items, you want to add Div around logo and menu . right ? Commented Jul 12, 2017 at 10:00
  • Yes that's I want and I need to put the search box and cart icon in another div and need to give this div's some styles Commented Jul 12, 2017 at 10:07
  • please share a screenshot pointing the new locations for elements , because few changes can be done via .phtml and css and others can be done via xml Commented Jul 12, 2017 at 10:09

2 Answers 2


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.


    Use _extend.less for adding custom styles

  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

  3. The same method as above you can use for Navigation at the below path in 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

  • Thank you, I will try this solution and I will come back to you if I have a problem Commented Jul 12, 2017 at 10:36
  • sure, let me know if any problem Commented Jul 12, 2017 at 10:36
  • Please I need to put search box and cart icon and sign in link in one div, Commented Jul 12, 2017 at 11:30
  • did you try the another answers mentioned here magento.stackexchange.com/questions/181691/… if yes then pass your site URL to check Commented Jul 12, 2017 at 11:31
  • SIGN IN coming in panel header DIV so with help of that answer you can move mini cart and search box to panel header DIV. Commented Jul 12, 2017 at 11:37

You can create your custom theme. Refer to devdocs and set parent theme to Blank.

You can move logo and navigation with move tag. Refer to layout instructions.

You can add html class to a div through xml layout like this:

<container name="header.box" htmlClass="box-header" htmlTag="div" before="-">
            <container name="panel.wrapper.top" htmlClass="panel wrapper" htmlTag="div" before="-">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.