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?
Customizing Header in extended LUMA Theme
Adding a <DIV />` around your logo and giving styles:
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.
_extend.less for adding custom styles
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
The same method as above you can use for Navigation at the below path in
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
upgrade/deploy/cache command to see the CSS changes if you are using
_extend.less for custom styling
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="-">