Invert site logo on specific pages

Site URL: http://www.colourclub.cc

Is there a way of fixing this issue? When browsing my site on mobile (Safari for iOS) There’s an unexpected colour displaying in the mobile status bar area and where the Home Screen control is. 

The home page is fine, but the site’s about and portfolio pages aren’t displaying correctly. Please see the images attached for reference. I need the status bar and Home Screen control area to match the background colours used for their respective pages.

Many thanks!

Matt

On 7/27/2022 at 3:28 PM, mattheadley said:

Thank you @tuanphan that's worked!

Is there a fix for the mobile browser issue too please? Looking to make the mobile status bar and home screen control areas match the background colour of their respective pages. Currently the neon blue colour used on the home page appears at the top and bottom of the other pages, ideally I'd like them to be fully white and fully black.

Any ideas?

You mean this red box?

Add to Page Header (Do not add to Custom CSS). Replace #333333 to color what you want on each page

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#333333">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#333333">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#333333">

3 hours ago, tuanphan said:

You mean this red box?

Yes, that’s the one! Is there any way to manipulate the colour of this? I’m struggling to find an answer 😩 

7 hours ago, tuanphan said:

Add to Page Header (Do not add to Custom CSS). Replace #333333 to color what you want on each page

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#333333">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#333333">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-status-bar-style" content="#333333">

 

Thank you 🙏🏼

Hey, y'all. Can anyone possibly help me get my *nav area on mobile only* to display a custom logo? It of course currently takes on whatever logo is in the header area of each page, but I need it to *always* be the white/teal/white version (instead of the black/teal/black version it is right now, since the nav area background is black).

Here's my site.

Thanks in advance!

14 hours ago, brandi_sqspace said:

Hey, y'all. Can anyone possibly help me get my *nav area on mobile only* to display a custom logo? It of course currently takes on whatever logo is in the header area of each page, but I need it to *always* be the white/teal/white version (instead of the black/teal/black version it is right now, since the nav area background is black).

Here's my site.

Thanks in advance!

Add to Design > Custom CSS

body.header--menu-open .header-title-logo a {
    filter: brightness(0) invert(1);
}

3 hours ago, tuanphan said:

body.header--menu-open .header-title-logo a {
    filter: brightness(0) invert(1);
}

@tuanphan This worked, almost — it inverts it so that it's the full/all white version of my logo. But I'm looking for the white/teal/white version of my logo, like the one you see on my home page (desktop).

On 10/12/2022 at 7:13 PM, brandi_sqspace said:

@tuanphan This worked, almost — it inverts it so that it's the full/all white version of my logo. But I'm looking for the white/teal/white version of my logo, like the one you see on my home page (desktop).

You mean keep desktop logo on mobile overlay menu?

On 10/14/2022 at 9:07 PM, tuanphan said:

You mean keep desktop logo on mobile overlay menu?

No, because not all desktop logos are the same color. I want a specific logo to *always* show on mobile nav (white/teal/white) — this one — because the mobile overlay menu is always black. And, of course, at the same size the fully white one appears on mobile currently.

On 10/22/2022 at 11:09 PM, brandi_sqspace said:

No, because not all desktop logos are the same color. I want a specific logo to *always* show on mobile nav (white/teal/white) — this one — because the mobile overlay menu is always black. And, of course, at the same size the fully white one appears on mobile currently.

Use this code

body.header--menu-open .header-title-logo a {
    background-image: unset !important;
    filter: unset !important;
}
body.header--menu-open .header-title-logo img {
    content: url(https://mcusercontent.com/83f895486924e07d3de98f96c/images/2cee9b9e-d46a-18dc-bf75-0d6fbab615bf.png);
    visibility: visible !important;
}

13 hours ago, tuanphan said:

body.header--menu-open .header-title-logo a {
    background-image: unset !important;
    filter: unset !important;
}
body.header--menu-open .header-title-logo img {
    content: url(https://mcusercontent.com/83f895486924e07d3de98f96c/images/2cee9b9e-d46a-18dc-bf75-0d6fbab615bf.png);
    visibility: visible !important;
}

That solved it! THANK YOU, as always, @tuanphan!

Hi , I have tried to do a similar thing on the homepage of my website but no code has worked so far.

I am trying to change my mobile site Logo and burger nav  to white like it is on desktop so it can be seen (https://emmaprempeh.com/)

Some codes you have provided for people with similar problems @tuanphan have worked but only 50%. It would turn the burger white on the homepage but unfortunately white on all the other pages which is what I don't want.

Is there a way to have the hamburger white only on my mobile homepage and not when the menu is clicked/ all other pages? 

On 1/10/2023 at 12:07 AM, ehawaxo said:

Hi , I have tried to do a similar thing on the homepage of my website but no code has worked so far.

I am trying to change my mobile site Logo and burger nav  to white like it is on desktop so it can be seen (https://emmaprempeh.com/)

Some codes you have provided for people with similar problems @tuanphan have worked but only 50%. It would turn the burger white on the homepage but unfortunately white on all the other pages which is what I don't want.

Is there a way to have the hamburger white only on my mobile homepage and not when the menu is clicked/ all other pages? 

Hi,

What is your site url?

Hello @Tuanphan I have figured it out using various code you have posted on other forum answers it took a while but I got there in the end.

I used these codes just to make my Mobile Menu Hamburger White only on one page:

To make hand burger white on home screen only.

You need to put this code in homepage header (settings, Advanced) :

<style>

  .burger-inner>div {

              background-color: white !important;

  }

</style>

Then you need to put this code on EACH page header (settings, Advanced) that you have to make the burger black on all the other pages:

<style>

  .burger-inner>div {

              background-color: black !important;

  }

</style>

The open nav menu might be white, to change the colour when open use this code in Design , Custom CSS:

/* Colour When Mobile Menu Opened */

.js-header-burger-open-title[hidden] ~ .burger-box {

  .burger-inner > div {

  background-color: black !important;

  }

I had not realised you replied but thanks for helping us all, all the help you have given others has been really helpful to those who are not a part of the forums! 

On 10/26/2022 at 7:55 AM, brandi_sqspace said:

That solved it! THANK YOU, as always, @tuanphan!

I used the same code - to try to replace the logo and it totally didn't work on mobile menu (great lookin site btw)

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

pw: mingus12!

14 hours ago, dfesenmyer said:

I used the same code - to try to replace the logo and it totally didn't work on mobile menu (great lookin site btw)

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

pw: mingus12!

Use this new code

header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/01/07/07/16/houses-7702757_640.jpg);
    visibility: visible !important;
}

10 hours ago, tuanphan said:

Use this new code

header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/01/07/07/16/houses-7702757_640.jpg);
    visibility: visible !important;
}

 

I'm sorry I was trying to replace the logo with a white logo on mobile menu open? like the site above. 

// logo color change on mobile menu
body.header--menu-open .header-title-logo a {
    background-image: unset !important;
    filter: unset !important;
}
body.header--menu-open .header-title-logo img {
    content: url("https://static1.squarespace.com/static/63cc8ba3ee9bcb73a78b7f83/t/63d43d70176bfd40ec296bbd/1674853744365/rachelwilson-logo-white.png");
    visibility: visible !important;
}

23 hours ago, dfesenmyer said:

I'm sorry I was trying to replace the logo with a white logo on mobile menu open? like the site above. 

 

// logo color change on mobile menu
body.header--menu-open .header-title-logo a {
    background-image: unset !important;
    filter: unset !important;
}
body.header--menu-open .header-title-logo img {
    content: url("https://static1.squarespace.com/static/63cc8ba3ee9bcb73a78b7f83/t/63d43d70176bfd40ec296bbd/1674853744365/rachelwilson-logo-white.png");
    visibility: visible !important;
}

I'm using this? for a mobile only logo. 

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

    visibility: visible !important;
}

i'm finding this challenging - the menu logo should be white / and on the the /homepage the mobile menu should be white as well. I'm not sure what part i'm missing. 

On 1/30/2023 at 5:07 AM, dfesenmyer said:

I'm using this? for a mobile only logo. 

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

    visibility: visible !important;
}

i'm finding this challenging - the menu logo should be white / and on the the /homepage the mobile menu should be white as well. I'm not sure what part i'm missing. 

Don't remove any code in your current code

Add this to Design > Custom CSS

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

ps: I usually use filter attribute to change an image to black or white, so no need to use another image

7 hours ago, tuanphan said:

Don't remove any code in your current code

Add this to Design > Custom CSS

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

ps: I usually use filter attribute to change an image to black or white, so no need to use another image

wow. fantastic - thanks a ton. 

Hey, guys! I've used the code below. The logo is inverted, but the links in the menu are white (both desktop and mobile). Do you know how I can fix this? Thank you!

<style>
  .header-title-logo {
    filter: invert(1);
  }
</style>

On 4/29/2023 at 6:03 PM, dragoslazarin said:

Hey, guys! I've used the code below. The logo is inverted, but the links in the menu are white (both desktop and mobile). Do you know how I can fix this? Thank you!

<style>
  .header-title-logo {
    filter: invert(1);
  }
</style>

You mean you need to invert nav links to black?

What is your site url?

Hi @tuanphan

https://ocht-org-nz.squarespace.com/
p/w: ocht

I need to add a coloured logo on the page you land on after a search and a page with a broken link but I'm unsure how to do this.

Coloured logo has been uploaded as /s/OCHT-logo-colour.png

Please can you advise?

Thanks

On 7/12/2023 at 5:07 AM, kkedwards87 said:

Hi @tuanphan

https://ocht-org-nz.squarespace.com/
p/w: ocht

I need to add a coloured logo on the page you land on after a search and a page with a broken link but I'm unsure how to do this.

Coloured logo has been uploaded as /s/OCHT-logo-colour.png

Please can you advise?

Thanks

Can you share link to a page? Tried some keyword to find this page but can't