1

I am trying to wrap a div around the logo image in Magento 2. I have tried the below but no luck. Thanks for any help!

    <referenceContainer name="header-wrapper">
        <block class="Magento\Cms\Block\Block" name="logo.wrapper" after="-">
            <arguments>
                <argument name="block_id" xsi:type="string">logo.wrapper</argument>
            </arguments>
        </block>
    </referenceContainer>
Improve this question
1
  • did you get the solution for this ? if not then let me know , its simple phtml file edit
    – Manoj Deswal
    Oct 10, 2017 at 4:15

3 Answers 3

Reset to default
2

Try the below code may help you

Magento_Theme\layout\default.xml

<referenceBlock name="logo">
        <block class="Magento\Cms\Block\Block" name="logo.wrapper" after="-">
            <arguments>
                <argument name="block_id" xsi:type="string">logo.wrapper</argument>
            </arguments>
        </block>
    </referenceBlock>
Improve this answer
1
  • Thanks but this didn't work either :-(
    – Kara
    Oct 9, 2017 at 20:04
2

In vendor/magento/module_theme/view/frontend/layout/default.xml

        <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>

You can see that the logo block is under the header-wrapper, so what you can do is create a container insider the header-wrapper then move the logo into your container.

In your theme app/design/frontend/VENDOR/THEME/Magento_Theme/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="header-wrapper">
            <container name="new.logo.wrapper" label="New Logo Wrapper" htmlTag="div" htmlClass="new-logo-wrapper"/>
        </referenceContainer>
        <move element="logo" destination="new.header.wrapper"/>
    </body>
</page>

=> Then the logo will be moved to the new wrapper. Clean the cache if it's enabled.

Improve this answer
1
  • 2
    I think currently, the move element should have an element attribute, rather than a name attribute.
    – ACJ
    Aug 14, 2019 at 7:50
1

Please try below xml code to wrap the logo in div:-

<referenceContainer name="header-wrapper">
    <container name="container.name" htmlTag="div" htmlClass="classname">    
        <block class="Magento\Cms\Block\Block" name="logo.wrapper" after="-">
            <arguments>
                <argument name="block_id" xsi:type="string">logo.wrapper</argument>
            </arguments>
        </block>
    </container>    
</referenceContainer>

Hope this help you.

Improve this answer

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.