1

I am new in magento and I am creating a custom theme for Magento 2.

I try to swap two elements, header wrapper and header content.

Default header: enter image description here I'm trying to get this: enter image description here

I create file frontend/<vendor>/<theme>/Magento_Theme/layout/default.xml, and try swap it with <move element="header.panel" destination="header.container" before="-"/> but it does not work.

1

Find below code in default.xml file and add highlighted part (after="header-wrapper).

app/design/frontend/Vendor/theme/Magento_Theme/layout/default.xml

<referenceContainer name="header.container">
    <container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" after="header-wrapper">
        <container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
            <block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
                <arguments>
                    <argument name="target" xsi:type="string">contentarea</argument>
                    <argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
                </arguments>
            </block>
            <block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
            <block class="Magento\Framework\View\Element\Html\Links" name="top.links">
                <arguments>
                    <argument name="css_class" xsi:type="string">header links</argument>
                </arguments>
            </block>
        </container>
    </container>
    <container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
        <block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
            <arguments>
                <argument name="logo_img_width" xsi:type="number">189</argument>
                <argument name="logo_img_height" xsi:type="number">64</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>

OR

<move element="header.panel" destination="header.container" after="header-wrapper"/>

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.