Magento 2 LUMA based custom theme - Needed extra Div under Menu

Question

I have create a new Theme based on the Luma theme and I need to add a new div right under the Menu. This will fall right before the homepage content.

Here is a screenshot to show where I need to add the new div.

How can I do this?

Answer 1

This code will place a new container at the top of the page, right under the navbar

<referenceContainer name="main.content">
    <container name="unique.name.here" label="Your New Container" htmlTag="div" htmlClass="your-new-container" before="-">
        <block class="Magento\Framework\View\Element\Template" name="your.new.block" template="Magento_Theme::html/your-new-template.phtml"/>
    </container>
</referenceContainer>

If you don't already have it, place this in your app/design/frontend/{{vender_namespace}}/{{theme}}/Magento_Theme/layout/default.xml file. And then don't forget to create your .phtml file. This can accually go anywhere, i just place these kind files in this location.