I'm trying to add a new container to Magento 2 and have a main navigation menu displayed in here (which I've created as a frontend block) then trying to add it to my own container where I can add a class to it. I've already set all that up and placed a red border around my new container with that class. I've been able to do that by adding it to my default.xml file for my theme but for some reason I can't get it moved into my header-wrapper area. I basically want it positioned in the same "container" as the logo and floated right, so it's directly across from the logo. Right now though it's only under the container.
Here is the code I have to add it to my pages:
<referenceContainer name="header-wrapper">
<container name="main-navigation" as="main-navigation" label="Page Custom Content" htmlTag="div" htmlClass="main-navigation">
<block class="Magento\Cms\Block\Block" name="main.nav" before="logo">
<arguments>
<argument name="block_id" xsi:type="string">main_navigation</argument>
</arguments>
</block>
</container>
</referenceContainer>
Is there a way to get it inside the .page-header__panel .container like where the logo is right now? I've tried referencing other containers but they aren't located where I'd like.
How I know where I'd like my main_navigation frontend block is I've located the Magento_Theme's default.xml and it shows where to logo is placed here:
The dashed blue line indicates the container I want it in:
<referenceContainer name="header.container">
<container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
<container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
<block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
<arguments>
<argument name="target" xsi:type="string">contentarea</argument>
<argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
</arguments>
</block>
<block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
<block class="Magento\Framework\View\Element\Html\Links" name="top.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</container>
</container>
<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
<block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
<arguments>
<argument name="logo_img_width" xsi:type="number">189</argument>
<argument name="logo_img_height" xsi:type="number">64</argument>
</arguments>
</block>
</container>
</referenceContainer>
So my assumption is that if I wanted my main_navigation block next to the logo is that I would place it in the "header-wrapper" container. Right?
Any help is appreciated.
* UPDATED *
After the suggestion from Abhishek, I place the code into my child themes default.xml file and my entire header disappears.
This is the code:
<referenceContainer name="header.container">
<container name="header.panel.wrapper" htmlClass="panel wrapper" htmlTag="div" before="-">
<container name="header.panel" label="Page Header Panel" htmlTag="div" htmlClass="panel header">
<block class="Magento\Framework\View\Element\Template" name="skip_to_content" template="Magento_Theme::html/skip.phtml">
<arguments>
<argument name="target" xsi:type="string">contentarea</argument>
<argument name="label" translate="true" xsi:type="string">Skip to Content</argument>
</arguments>
</block>
<block class="Magento\Store\Block\Switcher" name="store_language" as="store_language" template="switch/languages.phtml"/>
<block class="Magento\Framework\View\Element\Html\Links" name="top.links">
<arguments>
<argument name="css_class" xsi:type="string">header links</argument>
</arguments>
</block>
</container>
</container>
<container name="header-wrapper" label="Page Header" as="header-wrapper" htmlTag="div" htmlClass="header content">
<container name="new-container" as="new-container" label="new container" htmlTag="div" htmlClass="new-container">
<block class="Magento\Theme\Block\Html\Header\Logo" name="logo">
<arguments>
<argument name="logo_img_width" xsi:type="number">189</argument>
<argument name="logo_img_height" xsi:type="number">64</argument>
</arguments>
</block>
</container>
<container name="main-navigation" as="main-navigation" label="Page Custom Content" htmlTag="div" htmlClass="main-navigation">
<block class="Magento\Cms\Block\Block" name="main.nav" before="logo">
<arguments>
<argument name="block_id" xsi:type="string">main_navigation</argument>
</arguments>
</block>
</container>
</container>
</referenceContainer>
And this is what the top of my site looks like now.
