Magento 2 Layout – How to Move Footer-Container to Root

footerlayoutmagento2page-layoutstheme

I am developing a new Magento 2 theme based on Magento Blank parent.
I am trying to move the footer-container outside the page-wrapper container. To do so I inserted in my app/design/frontend/custom/theme/Magento_Theme/layout/default.xml
the following instruction:

<move element="footer" destination="root" after="-" />

The footer content is correctly moved outside the page-wrapper container but it is not wrapped anymore in the footer tag. What I get is:

<div class="page-wrapper">...</div>
<div class="footer content">...</div>

What I expected was

<div class="page-wrapper">...</div>
<footer class="page-footer">
    <div class="footer content">...</div>
</footer>

What should I do to keep the footer tag? Should I redeclare a new container with htmlTag="footer" in my default.xml and move the footer element inside it?

Best Answer

You need to reference the container by its name not its alias. The footer element you're looking for is declared in Magento/Theme/view/frontend/page_layout/1column.xml and has a name of footer-container. Changing your layout XML to the following should fix the issue:

<move element="footer-container" destination="root" after="-" />

Right now what you're doing is moving the child element with the name footer outside of footer-container. Since the footer-container no longer has any children the <footer> doesn't get rendered and you only see the child element you moved.

Related Solutions

Magento 2 – How to Move Block Inside a New Container in Layout XML

Put the 'move' outside the referenceContainer

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <move element="product.info.main" destination="product.info.container"/>
        <referenceContainer name="content">
            <container name="product.info.container" htmlTag="div" htmlClass="product-info-container" before="-"/>            
        </referenceContainer>
    </body>
</page>

Magento2 Header Container – Adding Top Links to New Header Container in Magento 2

So looks like you can't move an element which has been removed using xml. Simply commenting out the following:

<container name="header.panel.wrapper" remove="true" />

And making sure this is pointing at the correct block:

<move element="top.links" destination="header.top.actions" before="-" />

Will move the block into the correct area. Hope this helps people if they come across the same issue.

Best Answer

Related Solutions

Magento 2 – How to Move Block Inside a New Container in Layout XML

Magento2 Header Container – Adding Top Links to New Header Container in Magento 2

Related Topic