How To Add Different Logos For Mobile & Web Version?

How To Add Different Logos For Mobile & Web Version?

munfas_uk
Explorer
69 0 10

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

IMG_5228 (1).jpeg

Replies 5 (5)

EcomGraduates
Shopify Partner
632 52 90

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.


If this fixed your issue, likes and accepting as a solution are highly appreciated.

Build an online presence with our custom built Shopify Theme EcomifyTheme



munfas_uk
Explorer
69 0 10

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
Explorer
69 0 10

Where do I place this code? @EcomGraduates 

munfas_uk
Explorer
69 0 10

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

kevinbarry0
Tourist
9 0 2

Hey did you ever figure this out?