How to change logo colour on hover

On 12/25/2020 at 3:18 AM, bcmarimba said:

Amazing!! Thank you so much, that worked perfectly. 

Thank you for the tips. We added a gold button to help the white text be visible over the photos. We don't really like the overlay look, love the photos as is, but realize it makes it harder to read. Do you think it looks better now? 

How do you set the 2 logos/row? I will add a "back to top" link -- good call!  Thanks again.

Hi. Sorry for the delay. I was off some days for the new year

What is site access password?

https://www.brasswoodptown.com/

Sorry for my delay! It is: jackfreemont 

On 1/2/2021 at 4:51 AM, tuanphan said:

Hi. Sorry for the delay. I was off some days for the new year

What is site access password?

https://www.brasswoodptown.com/

sorry! I can't figure out how to reply to you in the forum, the pw is jackfreemont 

On 1/4/2021 at 2:28 AM, bcmarimba said:

sorry! I can't figure out how to reply to you in the forum, the pw is jackfreemont 

Password is incorrect.

Q1. Yes. You can change nav item color or overlay color

Q2. Add to Design > Custom CSS

/* footer logos */
@media screen and (max-width:767px) {
div#block-153b8cd34491dd3d4b89+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

---------

On 1/2/2021 at 4:51 AM, tuanphan said:

Hi. Sorry for the delay. I was off some days for the new year

What is site access password?

https://www.brasswoodptown.com/

I checked and the pw is working: www.brasswoodptown.com pw: jackfreemont (it's an unusual spelling) 

On 1/6/2021 at 5:03 AM, tuanphan said:

 

Q2. Add to Design > Custom CSS

/* footer logos */
@media screen and (max-width:767px) {
div#block-153b8cd34491dd3d4b89+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
}

---------

Thank you for the tips. We added a gold button to help the white text be visible over the photos. We don't really like the overlay look, love the photos as is, but realize it makes it harder to read. Do you think it looks better now? 

How do you set the 2 logos/row? I will add a "back to top" link -- good call!  Thanks again.

 

What does this code do to the logos? 

On 1/8/2021 at 2:24 AM, bcmarimba said:

What does this code do to the logos? 

2 logos/row on mobile

On 10/11/2021 at 6:25 AM, sdritchey said:

Hello Tuanphan,

I tried using the above code on my site and have uploaded an alternate logo to show on hover, and replaced the URL with a link to the alternate logo, which I uploaded in the CSS window.  

This results in the original logo disappearing, but no alternate logo shows in it's place so the area is simply blank.

My site is https://seedstudio.design, do you have an idea what might be wrong? 

Hi,

Can you send the code after replacing image url? WE can check easier

On 10/13/2021 at 12:25 AM, tuanphan said:

Hi,

Can you send the code after replacing image url? WE can check easier

Sure, here is the code I was attempting to use (currently not live on the site since it didn't work):

Quote

/* Show Alternate Logo on Hover */
.header-title-logo a:hover img {
    visibility: hidden;
}
.header-title-logo a:hover {
    background-image: url('https://static1.squarespace.com/static/6047e452b051a135f643fdd1/t/6161fbf61030a420258b38ed/1633811446951/logo%2C+text+%28green%29+resized+to+match.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

On 10/16/2021 at 2:00 AM, sdritchey said:

Sure, here is the code I was attempting to use (currently not live on the site since it didn't work):

 

 

The code missing a symbol. Use this new code

/* Show Alternate Logo on Hover */
.header-title-logo a:hover img {
    visibility: hidden;
}
.header-title-logo a:hover {
    background-image: url('https://static1.squarespace.com/static/6047e452b051a135f643fdd1/t/6161fbf61030a420258b38ed/1633811446951/logo%2C+text+%28green%29+resized+to+match.png') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

On 10/17/2021 at 6:28 PM, tuanphan said:

The code missing a symbol. Use this new code

/* Show Alternate Logo on Hover */
.header-title-logo a:hover img {
    visibility: hidden;
}
.header-title-logo a:hover {
    background-image: url('https://static1.squarespace.com/static/6047e452b051a135f643fdd1/t/6161fbf61030a420258b38ed/1633811446951/logo%2C+text+%28green%29+resized+to+match.png') !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

 

That did the trick, thank you!

Any way to make this for the site title when the menu is open only?

On 9/27/2023 at 2:06 AM, robfeltrin said:

Any way to make this for the site title when the menu is open only?

You mean change Site title Color when menu is open

or change Site Title to Logo Image when menu is open?