Sizing alternate mobile logo Squarespace 7.1

Site URL: https://www.coastalgrain2.squarespace.com

I'm trying to adjust the alternate mobile logo size as it is currently being cropped.

code:

/* Mobile logo */
@media screen and (max-width:767px) {
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/6281bbf5b699e31bcd719947/t/62ba84171b23872a6356b29d/1656390679424/Coastal-Grain-Logo-Mobile.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
}

Cheers,

Mark

The url doesn't exist. Can you check it again?

Updated.

p: 123coastalgrain123

Use this new code. Replace with new image url. I see image url above doesn't exist

/* Mobile logo */
@media screen and (max-width:767px) {
header#header img {
    content: url(https://static1.squarespace.com/static/6281bbf5b699e31bcd719947/t/62ba84171b23872a6356b29d/1656390679424/Coastal-Grain-Logo-Mobile.png);
}
}

Thanks @tuanphan, this works great.

I'm having an issue now where this alternate logo stays in place when the mobile dropdown menu is selected, and as the mobile menu is dark, it becomes hidden. Is there code to keep the original mobile logo when the mobile dropdown menu is opened?

Thanks!

9 hours ago, markadekoning said:

Thanks @tuanphan, this works great.

I'm having an issue now where this alternate logo stays in place when the mobile dropdown menu is selected, and as the mobile menu is dark, it becomes hidden. Is there code to keep the original mobile logo when the mobile dropdown menu is opened?

Thanks!

Hi. The logo is white here. Did you solve problem?

This only occurs on pages where the alternate logo is dark - see the gallery page /felix for example.

On 7/4/2022 at 6:52 PM, tuanphan said:

Use this new code. Replace with new image url. I see image url above doesn't exist

/* Mobile logo */
@media screen and (max-width:767px) {
header#header img {
    content: url(https://static1.squarespace.com/static/6281bbf5b699e31bcd719947/t/62ba84171b23872a6356b29d/1656390679424/Coastal-Grain-Logo-Mobile.png);
}
}

 

Try this new code

@media screen and (max-width:767px) {
body:not(.header--menu-open) header#header img {
    content: url(https://static1.squarespace.com/static/6281bbf5b699e31bcd719947/t/62d89481b589662c83b60123/1658360961945/Coastal-Grain-Mobile-Logo-Dark.png);
}
}

Thanks @tuanphan, you're a weapon.