Jump to content

Sizing alternate mobile logo Squarespace 7.1

Recommended Posts

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

Screen Shot 2022-06-28 at 2.37.28 pm.png

Edited by markadekoning
Spelling error
Link to comment
  • Replies 8
  • Views 385
  • Created
  • Last Reply

Top Posters In This Topic

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

 

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
  • 3 weeks later...

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!

Screen Shot 2022-07-21 at 9.42.22 am.png

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

Screen Shot 2022-07-21 at 9.42.22 am.png

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

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

 

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.