Jump to content

Changing logo(color) for specific page + Change logo(color) when tapping mobile menu navigation

Recommended Posts

Site URL: http://www.deriss.com/film

Hi!

I want to change the logo color for a specific page (www.deriss.com/film) and change logo color again when tapping the mobile navigation on that page.

Right now I successfully managed to change the logo color by uploading new logos in css and referring the urls (the logos looks all the same just color change)

Step by step;

1. Replaced logo in a page
2. called another logo on that same page when using mobile nav 
3. problem is the replaced logo (1) on the page is still there so now I have two logos overlapping each other. 

How do I remove the replaced logo (1) when tapping mobile nav

Here's the code; thankful for any help or direction, thanks! 

<style> 

.header--menu-open
.header-title-logo {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
  
}

  div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7a6a0c4aca21082659737/1610065568794/Deriss_blue_Logo.png") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}

</style>

Screenshot 2021-01-08 at 02.45.56.png

Screenshot 2021-01-08 at 02.46.09.png

Link to comment
1 hour ago, Deriss said:

Site URL: http://www.deriss.com/film

Hi!

I want to change the logo color for a specific page (www.deriss.com/film) and change logo color again when tapping the mobile navigation on that page.

Right now I successfully managed to change the logo color by uploading new logos in css and referring the urls (the logos looks all the same just color change)

Step by step;

1. Replaced logo in a page
2. called another logo on that same page when using mobile nav 
3. problem is the replaced logo (1) on the page is still there so now I have two logos overlapping each other. 

How do I remove the replaced logo (1) when tapping mobile nav

Here's the code; thankful for any help or direction, thanks! 

<style> 

.header--menu-open
.header-title-logo {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
  
}

  div.header-title-logo a {
content:url("https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7a6a0c4aca21082659737/1610065568794/Deriss_blue_Logo.png") !important;     
max-width: 290px;
/* if logo needs to be centered */
margin-left: auto;
margin-right: auto;
}

</style>

Screenshot 2021-01-08 at 02.45.56.png

Screenshot 2021-01-08 at 02.46.09.png

Remove this, it display big black logo

.header--menu-open
.header-title-logo {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

if you want to display new logo when mobile menu expand, use this

.header--menu-open .header-title-logo a {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
5 hours ago, bangank36 said:

Remove this, it display big black logo

.header--menu-open
.header-title-logo {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

if you want to display new logo when mobile menu expand, use this



.header--menu-open .header-title-logo a {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

Hi, @bangank36thanks for helping but unfortunately there's still two logos, the blue(replaced page logo) overlapping the black (Nav Menu open).

The size and position is perfect with this code tho, but can only see the blue logo when tapping mobile menu while you sense that the black logo is shown behind the blue. 

Can I make the black logo overlap instead? or remove the blue logo if open mobile menu nav?

Edited by Deriss
Link to comment

@Deriss Have you solved it yet?

I see text is a bit narrow on tablet.

Add this to Design > Custom CSS to increase width

/* tablet film page width */
@media screen and (max-width:991px) and (min-width:768px) {
body#collection-5ff7626bc06da2361a373c32 #page section:first-child .content {
    width: 75% !important;
}
}

image.thumb.png.0b1436fd0e0a62d718c3d09d455f9dcb.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
On 1/10/2021 at 9:09 AM, tuanphan said:

@Deriss Have you solved it yet?

I see text is a bit narrow on tablet.

Add this to Design > Custom CSS to increase width


/* tablet film page width */
@media screen and (max-width:991px) and (min-width:768px) {
body#collection-5ff7626bc06da2361a373c32 #page section:first-child .content {
    width: 75% !important;
}
}

image.thumb.png.0b1436fd0e0a62d718c3d09d455f9dcb.png

 

Hi @tuanphanHaven't solved this yet, do you have any suggestions? Have tried without any luck, I'm guessing it's beyond my knowledge. 

I added the code you suggested for tablet, thanks for looking out! I don't have a tablet to check but I'm guessing it's ok

Link to comment
21 hours ago, Deriss said:

Hi @tuanphanHaven't solved this yet, do you have any suggestions? Have tried without any luck, I'm guessing it's beyond my knowledge. 

I added the code you suggested for tablet, thanks for looking out! I don't have a tablet to check but I'm guessing it's ok

Add to Design > Custom CSS, under current code

/* remove black logo on menu open */
.header--menu-open .header-title-logo a {
    background-image: none;
}

To preview your site on tablet > Right click anywhere > Choose Inspect Element > Choose iPad on top of browser.

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
1 hour ago, tuanphan said:

Add to Design > Custom CSS, under current code


/* remove black logo on menu open */
.header--menu-open .header-title-logo a {
    background-image: none;
}

To preview your site on tablet > Right click anywhere > Choose Inspect Element > Choose iPad on top of browser.

Oh it's the other way around — I want to remove blue logo when mobile nav open, so it will be only black logo.

Thanks for the tip regarding tablet 🙂

Link to comment
  • 2 years later...
On 1/7/2021 at 8:18 PM, Beyondspace said:

Remove this, it display big black logo

.header--menu-open
.header-title-logo {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

if you want to display new logo when mobile menu expand, use this

.header--menu-open .header-title-logo a {
      background-image: url(https://static1.squarespace.com/static/5fd88f5e481f942658c4d703/t/5ff7b048ce30f23f0e4351d5/1610068040963/Deriss_Black_Logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

 

I'm trying to change the mobile logo on one page /home AND make sure the logo is the white one when the mobile menu is opened.?

using this. for part 2?

// logo color change on mobile menu
.header--menu-open .header-title-logo a {
      background-image: url("https://static1.squarespace.com/static/63cc8ba3ee9bcb73a78b7f83/t/63d43d70176bfd40ec296bbd/1674853744365/rachelwilson-logo-white.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
}

https://cornet-strawberry-368d.squarespace.com/

pw: mingus12!

Link to comment
On 1/30/2023 at 5:00 AM, dfesenmyer said:

I'm trying to change the mobile logo on one page /home AND make sure the logo is the white one when the mobile menu is opened.?

using this. for part 2?

// logo color change on mobile menu
.header--menu-open .header-title-logo a {
      background-image: url("https://static1.squarespace.com/static/63cc8ba3ee9bcb73a78b7f83/t/63d43d70176bfd40ec296bbd/1674853744365/rachelwilson-logo-white.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
}

https://cornet-strawberry-368d.squarespace.com/

pw: mingus12!

Hi,

I see you solved with this CSS?

body.header--menu-open header#header img {
    filter: brightness(0) invert(1);
}

 

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.