How can I change the mobile logo? 7.0

Site URL: https://saragobbo.com

How can I change the mobile logo? I want to change the mobile logo for other in other color.

Is there a way to do this with css?

Thanks!

site: https://saragobbo.com

7.0

12 hours ago, mvorozco16 said:

Site URL: https://saragobbo.com

How can I change the mobile logo? I want to change the mobile logo for other in other color.

Is there a way to do this with css?

 

Thanks!

site: https://saragobbo.com

7.0

Have you solved it yet? 

I've checked that the logo in desktop is different from the one in mobile

Mobile

desktop

Hi @bangank36

No, I haven´t solve it.

The desktop version has some pages with the logo pink and others with the logo yellow.

I want to have in the mobile version only the yellow logo. Do you know of there is a way to do it with css? Thanks!

@mvorozco16 Add to Design > Custom CSS

/* Mobile logo */
a.Mobile-bar-branding img {
    visibility: hidden;
}
a.Mobile-bar-branding {
    background-image: url(https://static1.squarespace.com/static/5cf857e8b0f1d60001f7cc9a/t/5fa9e44bd9418b4912e75aee/1604969547037/Monogram-03.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

@tuanphan Thank you so much! It worked!

Do you know what code should I add to make the mobile logo a little smaller?

Thanks in advance!

On 10/21/2021 at 11:52 PM, mvorozco16 said:

@tuanphan Thank you so much! It worked!

Do you know what code should I add to make the mobile logo a little smaller?

Thanks in advance!

Hi. Change this line

Quote

 background-size: contain;

to

Quote

 background-size: 30px;

Thanks so much @tuanphan

Two quick questions over here for the mobile version!

1. Is there a code to make the picture smaller in the "Who" section? mobile version*

2. Is there a code to have the logo in pink in the "Why" and "Contact" sections? mobile version*

Thank You!

On 10/26/2021 at 1:35 AM, mvorozco16 said:

Thanks so much @tuanphan

Two quick questions over here for the mobile version!

1. Is there a code to make the picture smaller in the "Who" section? mobile version*

2. Is there a code to have the logo in pink in the "Why" and "Contact" sections? mobile version*

Thank You!

#1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* Who image */
div#block-yui_3_17_2_1_1603321005971_125413 {
    width: 50%;
    margin: 0 auto;
}
}

#2. Edit Why, Contact page >> Add a Code Block on bottom of page >> paste this code

<style>
  /* Mobile logo */
a.Mobile-bar-branding img {
    visibility: hidden;
}
a.Mobile-bar-branding {
    background-image: url(https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__340.jpg) !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}
</style>

Replace pixabay with pink image url

Thanks @tuanphan it worked!

If I needed to make the "For Whom" images a little bit smaller on the mobile version, which code should I use? The same I used in "Who"?

Thanks in advance!

On 11/3/2021 at 4:17 AM, mvorozco16 said:

Thanks @tuanphan it worked!

If I needed to make the "For Whom" images a little bit smaller on the mobile version, which code should I use? The same I used in "Who"?

Thanks in advance!

 

Yes. Similar, with new block id. Use this tool to find block id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

I have found all the block id's of the images! Thanks

But when I add the code It doesn't work.

I don´t know if I'm adding it wrong!

On 11/9/2021 at 12:59 AM, mvorozco16 said:

I have found all the block id's of the images! Thanks

But when I add the code It doesn't work.

I don´t know if I'm adding it wrong!

Which code did you use?

I'm using this one you send me:

/* Mobile */
@media screen and (max-width:767px) {
/* Who image */
div#block-yui_3_17_2_1_1603321005971_125413 {
    width: 50%;
    margin: 0 auto;
}
}

On 11/12/2021 at 6:14 AM, mvorozco16 said:

I'm using this one you send me:

/* Mobile */
@media screen and (max-width:767px) {
/* Who image */
div#block-yui_3_17_2_1_1603321005971_125413 {
    width: 50%;
    margin: 0 auto;
}
}

With for whom, use this code

/* Mobile For Whom */
@media screen and (max-width:767px) {
div#page-5f5666f846724119fe4defc7 .image-block {
    width: 50%;
    margin: 0 auto;
}
}