0

I have created a custom theme from scratch, everything works perfectly except one thing, in my home page 

Vendor/Theme/Magento_Theme/layout/default.xml

I can't place my 'main' container after my 'header' container header placed after main Here is the code:

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <container name="header.container.panel.nav" htmlTag="header" before="main.content">
            //Some stuff
        </container>
        <container name="main.content" htmlTag="main" after="header.container.panel.nav">
            //Some stuff
        </container>
    </body>
</page>

What I have tried:

  1. Using dash instead of container name in the before and after instruction
  2. Moving the definition of the main.content container before header
  3. adding
<move element="main.content" destination="body" after="header.container.panel.nav"/>

Even if I'm not sure that the instruction destination="body" work as intended.

Improve this question

1 Answer 1

Reset to default
1

Have you tried adding a container as a parent? My idea is before/after do not work when the containers do not have a parent, and it would explain why Magento use the root container as a parent:

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <container name="root">
        <container name="after.body.start" as="after.body.start" before="-" label="Page Top"/>
        <container name="page.wrapper" as="page_wrapper" htmlTag="div" htmlClass="page-wrapper">
            <container name="global.notices" as="global_notices" before="-"/>
            <container name="main.content" htmlTag="main" htmlId="maincontent" htmlClass="page-main" />
            <container name="page.bottom.container" as="page_bottom_container" label="Before Page Footer Container" after="main.content" htmlTag="div" htmlClass="page-bottom"/>
            <container name="before.body.end" as="before_body_end" after="-" label="Page Bottom"/>
        </container>
    </container>
</layout>

So in your example it would be:

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <container name="root.container">
            <container name="header.container.panel.nav" htmlTag="header" before="main.content">
                //Some stuff
            </container>
            <container name="main.content" htmlTag="main" after="header.container.panel.nav">
                //Some stuff
            </container>
        </container>
    </body>
</page>

If that doesn't work you could then try:

<move element="main.content" destination="root.container" after="header.container.panel.nav"/>
Improve this answer
2
  • Thanks for your help! It helped to find the solution, you should edit your post to avoid errors i had, you should not name the container root because it's gonna override (I guess) another container (I named it root.container, so your content will be broken (I only had the view store showing). and I had to had move element for both container to make it work (for my header AND my content, else it wouldn't work)
    – ChristopheS
    Commented May 5, 2020 at 8:34
  • Good stuff, I've updated my answer so it won't override the core root container. Thanks for the update.
    – Ben Crook
    Commented May 5, 2020 at 9:29

Your Answer

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

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