1

I need to set different logos for my store: a logo for desktop and a different one for mobile using 768 as breakpoint, I do not have to use an existing extension.
please help

1
  • I'm not very familiar with css, but looks like to me this issue is 100% css. You can change the url of the logo depending on his class.
    – Claims
    Jun 8 at 15:51

1 Answer 1

1

You can do it by adding an extra logo from your theme directory and hide the main logo after break point using css.

update logo.phtml app/design/frontend/your vendor/your theme/Magento_Theme/templates/html/header/logo.phtml

<a
class="logo"
href="<?= $block->escapeUrl($block->getUrl('')) ?>"
title="<?= $block->escapeHtmlAttr($storeName) ?>"
aria-label="store logo">
<img src="<?= $block->escapeUrl($block->getLogoSrc()) ?>" class="main_logo"
     title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
     alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
        <?= $logoWidth ? 'width="' . $block->escapeHtmlAttr($logoWidth) . '"' : '' ?>
        <?= $logoHeight ? 'height="' . $block->escapeHtmlAttr($logoHeight) . '"' : '' ?>
/> <!--add class "main_logo" to hide it in responsive view (break point)-->
        
        
 <img src="<?= $this->getViewFileUrl('images/responsive_logo.png') ?>" class="responsive_logo"
     title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
     alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
       
/>    <!--//to get required logo from theme directory app/design/frontend/your vendor/your theme/web/images    -->
        

add add following lines in css

.logo .responsive_logo{display: none;}
@media(max-width:768px){
.logo .main_logo{display: none;}
.logo .responsive_logo{display: block;}
}

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.