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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.