How To Add Different Logos For Mobile & Web Version?

[munfas_uk]

hey! How would we make it so our website has a separate logo for mobile & desktop. We have added 2 photos for reference. We currently only have the mobile logo selected. We are needing our desktop/pc version of our logo to be a different. 

If you could help us with the code that would be highly appreciated. Thank you.

our website: munnafashion.com

 

 

[EcomGraduates]

you can use CSS media queries to display different images depending on the screen size of the device accessing the site.

example

/* Mobile logo */
@media (max-width: 767px) {
  .site-logo {
    background-image: url('path/to/mobile-logo.png');
    /* additional styles for the mobile logo */
  }
}

/* Desktop logo */
@media (min-width: 768px) {
  .site-logo {
    background-image: url('path/to/desktop-logo.png');
    /* additional styles for the desktop logo */
  }
}

Replace 'path/to/mobile-logo.png' and 'path/to/desktop-logo.png' with the actual paths to your logo images.

[munfas_uk]

Thank you. I placed this code in my main theme custom css but it didn't seem to work. Where exactly do i place this code? 

this is the code: 

/* Mobile logo */
@media (max-width: 767px) {
.site-logo {
background-image: url("https://cdn.shopify.com/s/files/1/0697/4593/4649/files/My_project-1_34.png?v=1682386024");
/* additional styles for the mobile logo */
}
}

/* Desktop logo */
@media (min-width: 768px) {
.site-logo {
background-image: url("https://cdn.shopify.com/s/files/1/0697/4593/4649/files/My_project-1_45.png?v=1682617253");
/* additional styles for the desktop logo */
}
}

[munfas_uk]

Where do I place this code? @EcomGraduates 

[munfas_uk]

@EcomGraduates ?? Where do i place this code. Thankyou.

[kevinbarry0]

Hey did you ever figure this out?