Magento 2: How to add a div in below navigation?

Question

I am trying to get a div displayed directly below the navigation on a theme which extends Luma

I have added the following into my Magento_Theme/layout/default.xml but cannot see any results. The block as been created via admin UI.

<referenceContainer name="below.nav">
    <container name="after_main" label="Before Main Columns" htmlTag="div" htmlClass="topbar" before="columns.top">
        <block class="Magento\Cms\Block\Block" name="topbar">
            <arguments>
                <argument name="block_id" xsi:type="string">topbar</argument>
            </arguments>
        </block>
    </container>
</referenceContainer>

Answer 1

Try to use container with name: top.container to reference. So, change your code to the next value:

<referenceContainer name="top.container">
    <block class="Magento\Cms\Block\Block" name="topbar">
        <arguments>
            <argument name="block_id" xsi:type="string">topbar</argument>
        </arguments>
    </block>
</referenceContainer>

And content from your CMS block with topbar ID should be displayed after the nav with class navigation

Answer 2

I was finally able to get this to work after changing the container similar to what was mentioned here

<referenceContainer name="page.top">
          <container name="below.nav.topbar" label="Before Main Columns" htmlTag="div" htmlClass="topbar" before="breadcrumbs">
            <block class="Magento\Cms\Block\Block" name="topbar">
                <arguments>
                    <argument name="block_id" xsi:type="string">topbar</argument>
                </arguments>
            </block>
          </container>
      </referenceContainer>