Jump to content

How can I change the mobile logo? 7.0

Recommended Posts

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

image.png.60d9d66fda439f88ee806e3767757bad.png

Mobile

image.thumb.png.07c440349fa8c8249fda8db51a4aa1ae.png

desktop

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.