Changing Site Title Text

Site URL: https://www.brayanenriquez.com/

Hello,

website: https://www.brayanenriquez.com/

is there a way with CSS to change the Site Title Text (aka "Brayan Enriquez") to be black while on the homepage (aka while on https://www.brayanenriquez.com/ ) but once the user navigates to another page, the Site Title Text returns to the grey it is now? 

I essentially want the Site Title Text to work similarly to the header navigation buttons on my website where if a use is on the "About" page, then the "About" text in the header is black. And if a user then goes onto the "Projects" page, then the "Projects" text in the header is black ,and the about text returns to grey.

I hope this makes sense. I've included my current header CSS below. Feel free to simplify the code if you see an opportunity.

Thanks, and happy holidays.

/* desktop header visual */
a#site-title:hover {
  color: #000000;
}
div.header-title-text--active>a {
    color: #000000 !important;
}
div.header-nav-item>a:hover {
    color: #000000 !important;
      background: transparent;
}
div.header-nav-item--active>a {
    color: #000000 !important;
}
.header-nav-item--active a {
    background-image: none!important;
}
.header-announcement-bar-wrapper {
    max-width: 2480px;
    margin: 0 auto;
}
.header-layout-nav-right .header-nav .header-nav-item {
      margin-left: 6vw !important;
}

/* desktop header folder visual */
body:not(.header--menu-open) .header-nav-folder-item--active .header-nav-folder-item-content {
    background-image: none !important;
    color: #000000;
}
.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item:hover a {
  color: #000000 !important;
}
.header-nav-folder-content {
    text-align: left !important;
      right: -159px !important;
      background-color: transparent !important;
}

helppp

Hello @deerdeerdeer, that is possible. You can do that by adding this code:

1. Hover over the page name in your Squarespace dashboard until you see the gear icon next to it.
2. Click on the gear icon to open the Page Settings.
3. In the Page Settings, scroll down to the Advanced section.
4. Paste the updated code inside the Custom Code box.
5. Click Save to apply the code to that specific page.

This will ensure that the custom code only applies to the page you edited.

<style>
/* Header Title Text Link Styling */

/* This rule targets all anchor links inside elements with the 'header-title-text' class. */
.header-title-text a {
    color: black !important; /* Forces the link text color to be black, overriding any other styles. */
}
</style>

15 hours ago, Spark-Plugin said:

Hello @deerdeerdeer, that is possible. You can do that by adding this code:

1. Hover over the page name in your Squarespace dashboard until you see the gear icon next to it.
2. Click on the gear icon to open the Page Settings.
3. In the Page Settings, scroll down to the Advanced section.
4. Paste the updated code inside the Custom Code box.
5. Click Save to apply the code to that specific page.

This will ensure that the custom code only applies to the page you edited.

<style>
/* Header Title Text Link Styling */

/* This rule targets all anchor links inside elements with the 'header-title-text' class. */
.header-title-text a {
    color: black !important; /* Forces the link text color to be black, overriding any other styles. */
}
</style>

 

Is there any way to do this in the custom CSS section? I sadly don't have premium

18 hours ago, Spark-Plugin said:

@deerdeerdeer, yes, you can do that by following the steps below. See attached screenshots for reference:

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code below into the CSS editor.
3. Hit Save and you’re done

/* Header Title Text Link Styling */
#collection-66012d4484a32034fce8847f .header-title-text a {
    color: black !important; /* Forces the link text color to be black, overriding any other styles. */
}

 

THANK YOU!! THIS WORKED!!