0

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.

enter image description here

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.

enter image description here

1

Try below code. I created another container inside main container and move your container. Now you have to set Design accordingly.

<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>
  • Thanks for the suggestion. I've added this code to my child themes default.xml but then my whole header disappears. Any ideas as to why it might be doing that? – kia4567 Nov 28 '17 at 21:15
  • what do you mean whole header disappear? – Abhishek Panchal Nov 28 '17 at 21:25
  • I'v updated my question. Take a look and see what I mean. Thanks! – kia4567 Nov 28 '17 at 23:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.