4

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?

Improve this question
5
  • have you extended your theme already ?
    – Manoj Deswal
    Jul 12, 2017 at 9:46
  • Yes I applied my custom theme and trying to change the layout
    – Kareem Sultan
    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 ?
    – Manoj Deswal
    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
    – Kareem Sultan
    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
    – Manoj Deswal
    Jul 12, 2017 at 10:09

2 Answers 2

Reset to default
5

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

Improve this answer
10
  • Thank you, I will try this solution and I will come back to you if I have a problem
    – Kareem Sultan
    Jul 12, 2017 at 10:36
  • sure, let me know if any problem
    – Manoj Deswal
    Jul 12, 2017 at 10:36
  • Please I need to put search box and cart icon and sign in link in one div,
    – Kareem Sultan
    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
    – Manoj Deswal
    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.
    – Manoj Deswal
    Jul 12, 2017 at 11:37
4

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="-">
            </container>                    
</container>
Improve this answer

Your Answer

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

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