Changing font color in header on homepage only.

Site URL: https://adrianludek.com/

Hi guys,

I'm having some issues trying to change the font color inside the header on home page only. 

I have a custom css in design section that makes it transparent, here's the code, but I wonder if you know how to change the color?

Quote

/* homepage header transparent */
.homepage header#header {
    background: transparent;
}

Thanks in advance!

I have managed to test some options out and found a working solution:

/*Change homepage nav-item color*/
.homepage
.header-nav-item a {
    color: white !important;
}
.homepage
.header-nav-item:hover a {
    color: white !important;
}
/* folder */
.homepage
.header-nav-folder-item:hover a {
    color: white !important;
}

Homepage Navigation use First Section Color. You can set in first section. You can also combine above code to shorter

/*Change homepage nav-item color*/
.homepage {
.header-nav-item a, .header-nav-folder-item:hover a {
    color: white !important;
}
}

Hi.

I am having a little problem with my them. Only the navigation font turns white. Not the logo or social icon turns white on the home page. Here is the code that I have for the whole site:

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
    margin-bottom: 5px !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 1 !important;
    padding-right: 1 !important;
}
}
/*Change homepage nav-item color*/
.homepage {
.header-nav-item a, .header-nav-folder-item:hover a {
    color: white !important;
}
}

On 6/16/2023 at 7:20 AM, Newbie2375 said:

Hi.

I am having a little problem with my them. Only the navigation font turns white. Not the logo or social icon turns white on the home page. Here is the code that I have for the whole site:

 

/* Masonry one item on mobile */
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
    margin-bottom: 5px !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 1 !important;
    padding-right: 1 !important;
}
}
/*Change homepage nav-item color*/
.homepage {
.header-nav-item a, .header-nav-folder-item:hover a {
    color: white !important;
}
}

What is site url? We can check class name easier

On 6/20/2023 at 12:04 AM, tuanphan said:

What is site url? We can check class name easier

Hi, Thanks!

The site:

https://tambourine-chihuahua-69yg.squarespace.com/

PASSWORD: Testing89

54 minutes ago, Newbie2375 said:

Hi, Thanks!

The site:

https://tambourine-chihuahua-69yg.squarespace.com/

PASSWORD: Testing89

Use this CSS for both

body.homepage a#site-title, body.homepage header#header svg {
    color: white !important;
}