Jump to content

Hide logo from mobile overlay menu

Go to solution Solved by Beyondspace,

Recommended Posts

Site URL: https://www.rubenvanriel.nl/performance-method

I've created the site www.rubenvanriel.nl and use in the header a white logo.
I've changed on certain pages (for example: https://www.rubenvanriel.nl/performance-method)
the logo because the background is white.

I've used this code in the header code:

<style>
  
.header-title-logo a {
content: url("https://static1.squarespace.com/static/604a2484aa92df0f526d7479/t/604a6076ce3f69737ba12e41/1615487094484/Logo+Ruben+van+Riel_RGB.png");
  }
 
</style>

I only want to hide the logo for the mobile menu overlay because the logo is not visible anymore on the dark red background.
I've tried a few solutions and codes but none of them are working for me. Can anyone help me out? Thanks a million!

Link to comment
  • Solution
1 hour ago, Bluemonque said:

Site URL: https://www.rubenvanriel.nl/performance-method

I've created the site www.rubenvanriel.nl and use in the header a white logo.
I've changed on certain pages (for example: https://www.rubenvanriel.nl/performance-method)
the logo because the background is white.

I've used this code in the header code:

<style>
  
.header-title-logo a {
content: url("https://static1.squarespace.com/static/604a2484aa92df0f526d7479/t/604a6076ce3f69737ba12e41/1615487094484/Logo+Ruben+van+Riel_RGB.png");
  }
 
</style>

I only want to hide the logo for the mobile menu overlay because the logo is not visible anymore on the dark red background.
I've tried a few solutions and codes but none of them are working for me. Can anyone help me out? Thanks a million!

try

.header--menu-open .header-display-mobile .header-title-logo {
  display: none;
}

image.png.5f55b87cb3fb79af48ba3ffa6d111bdf.png

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
  • 6 months later...
On 10/12/2021 at 1:24 AM, Gigige said:

it doesn't work for me 😞

Do you have another code to hide the title logo ONLY when the overlay menu is open?

thanks :)

 

Try this. If it doesn't work, please share site url

body.header--menu-open a#site-title {
	visibility: hidden !important;
}

 

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
  • 10 months later...

hi there, 

I have tried all of these codes but nothing is working... 

Am I placing in CSS or Header? I have tried both options but the logo is still displaying in the mobile menu overlay..

Is the first header code in the initial question required also? 

I am using 7.1 

Any other advice? 

Link to comment
On 8/17/2022 at 12:20 PM, SarahEnglish said:

hi there, 

I have tried all of these codes but nothing is working... 

Am I placing in CSS or Header? I have tried both options but the logo is still displaying in the mobile menu overlay..

Is the first header code in the initial question required also? 

I am using 7.1 

Any other advice? 

Try this CSS

body.header--menu-open header#header img {
	visibility: hidden !important;
	opacity: 0 !important;
}

 

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.