How To Add Different Logos For Mobile & Web Version?

Store Design
, , , ,
1

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

logo screenshot.PNG
logo screenshot.PNG399×215 90.9 KB

IMG_5228 (1).jpeg
IMG_5228 (1).jpeg246×400 22.7 KB

2

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.

3

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 */
}
}

4

Where do I place this code? @EcomGraduates

5

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

6

Hey did you ever figure this out?