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>
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>
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 name="logo" destination="new.header.wrapper"/>
</body>
</page>
=> Then the logo will be moved to the new wrapper. Clean the cache if it's enabled.
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.
