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?

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

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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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