How to Change Header Text Colour On A Specific Page?

How do I change header text colour on a specific page? The colour palette of my website is white and green, but on a specific page, I want it to be white and light blue.

I have managed to get the logo colour changed on the specific page after looking through a few forum posts, but I still can't seem to figure out how to change the header text colour.

Does anyone know code to fix this?

Hi,

Can you share link to page? We can check easier

On 6/23/2023 at 3:35 AM, tuanphan said:

Hi,

Can you share link to page? We can check easier

Sure, here you go:

https://www.smilinglawn.ca/smilinghome

I want to change the text colour for the header pages titles, such as the "Home" title, "Our Programs" title, "Individual Services" title, etc. You will notice it is green, while everything else is light blue. I want to change the text colour to light blue too. 

Also, on mobile devices, the button to view the website pages needs to be light blue as well. On mobile devices, it looks like two horizontal lines. How do I make that blue as well? Thank you.

On 7/7/2023 at 2:52 AM, tuanphan said:

Add to Design > Custom CSS

/* Smiling Home */
body#collection-6492199cb9772729c07c0887 {
header#header a {
    color: #50a4c9 !important;
}
.burger-inner>div {
    background-color: #50c4e9 !important;
}}

 

It worked! Thank you so much.

On another note, is there a way to change what links the header page title(s) lead to? I only want this change to apply on certain pages in which I apply the CSS code to. And similarly, is there a way to change where the site logo leads you to on certain pages only? Thank you for all of your help!

2 hours ago, Omer said:

It worked! Thank you so much.

On another note, is there a way to change what links the header page title(s) lead to? I only want this change to apply on certain pages in which I apply the CSS code to. And similarly, is there a way to change where the site logo leads you to on certain pages only? Thank you for all of your help!

Add to That Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() {
// change logo link
$('header#header .header-title a').attr('href','https://google.com');
});
</script>

Replace google with new url

Hello. This changes the link to where the site logo leads you to on EVERY PAGE. How do I only have this site logo send you to a link on specific certain pages/links?

To get a better understanding of what I mean, I have a lawn care company "Smiling Lawn" (smilinglawn.ca) and a home improvement sister company titled "Smiling Home" (smilinglawn.ca/smilinghome).

"Smiling Home" operates from the same Smilinglawn.ca website, so it is almost like 'a website in a website'.

You will notice that the home page and header titles, such as "Home", "Contact Us", etc. is green on smilinglawn and light blue on smilinghome.

So, how do I change where the header links and logo link take you? I want only the smiling home part of the site to take you to a different "home" page and have a different "contact us" page that it leads you to. Almost so it is like its own website, if that makes sense. If you need further clarification or have any questions, feel free to let me know.

On 11/8/2023 at 11:19 PM, Omer said:

Hello. This changes the link to where the site logo leads you to on EVERY PAGE. How do I only have this site logo send you to a link on specific certain pages/links?

To get a better understanding of what I mean, I have a lawn care company "Smiling Lawn" (smilinglawn.ca) and a home improvement sister company titled "Smiling Home" (smilinglawn.ca/smilinghome).

"Smiling Home" operates from the same Smilinglawn.ca website, so it is almost like 'a website in a website'.

You will notice that the home page and header titles, such as "Home", "Contact Us", etc. is green on smilinglawn and light blue on smilinghome.

So, how do I change where the header links and logo link take you? I want only the smiling home part of the site to take you to a different "home" page and have a different "contact us" page that it leads you to. Almost so it is like its own website, if that makes sense. If you need further clarification or have any questions, feel free to let me know.

I said add to Page Header (code will run on that page only), but you added to Sitewide Code Injection Header (code will run on all pages)