cancel
Showing results for 
Search instead for 
Did you mean: 

M2.3 - How to add responsive for Panel Header?

M2.3 - How to add responsive for Panel Header?

I have created custom theme which is inherit form Magento Blank theme, just alignment the header panel using,

app\design\frontend\MyTheme\theme\Magento_Theme\layout\default.xml

Update and align the logo:

<referenceBlock name="logo">
    <arguments>
        <argument name="logo_file" xsi:type="string">images/logo.png</argument>
        <argument name="logo_width" xsi:type="number">257</argument>
        <argument name="logo_height" xsi:type="number">24</argument>
        <argument name="logo_top" xsi:type="number">43</argument>
        <argument name="logo_left" xsi:type="number">140</argument>
        <argument name="logo_alt" xsi:type="string">Logo name</argument>
    </arguments>
</referenceBlock>

Remove Blocks :

<referenceBlock name="report.bugs" remove="true" />
<referenceBlock name="register-link" remove="true" />
<referenceBlock name="header" remove="true" />
<referenceBlock name="advanced-search-link" remove="true" />
<referenceBlock name="authorization-link-login" remove="true" />

Move Default element:

<move element="minicart" destination="header.panel" before="-"/>
<move element="top.search" destination="header.panel" before="top-links"/>
<move element="logo" destination="header.panel"/>
<move element="custom-link" destination="header.panel" after="logo" />

For height and width alignment using _header.less under app\design\frontend\MyTheme\theme\web\css_header.less then import _header.less into the _extend.less under app\design\frontend\MyTheme\theme\web\css\source_extend.less.

In which part will add responsive for my header? Any best practice for design the header welcome.