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

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>

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>

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

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?

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

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

 

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

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.

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 🙂

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!

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