3

I have a Module which added a container under the Luma main menu.

Here's the code:

<container name="area1" label="Your New Container" htmlTag="div" htmlClass="your-new-container" before="-">
    <block class="Magento\Framework\View\Element\Template" name="area1.block" template="Vendor_Module::area1.phtml"/>
</container>

My problem is that I need it to go 100% width. See image below:

enter image description here

How can I do this?

1 Answer 1

2

You can reference a container that has full width e.g. page.top so you'll wrap up your code inside page.top container which will create full width container

<referenceContainer name="page.top">
<container name="area1" label="Your New Container" htmlTag="div" htmlClass="your-new-container" after="navigation.sections">
    <block class="Magento\Framework\View\Element\Template" name="area1.block" template="Vendor_Module::area1.phtml"/>
</container>
</referenceContainer>
1
  • use before and after directives for positioning. In your case after="navigation.sections" will go inside your container declaration
    – Devtype
    Sep 28, 2016 at 9:24

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.