change header color on all pages (not just homepage)

Where did you put your CSS code? It would be correct, but I don’t see it being loaded.

Hi and thanks for the reply.
I added it to the customize, CSS area in my theme.
Would I need to log in to my host and change it on the backend?

Here’s all my CSS code, in case it’s not being triggered because of another command.

.designed-by, #footer-copy .wpzoom, #footer .wpzoom, .site-info .designed-by, .site-info p.right, .footer-info .designed, .site-info .copyright span:nth-child(2) { display: none; }
.designed-by,
.site-info .copyright,
#footer-copy .wpzoom,
#footer .wpzoom,
.site-info .designed-by,
.site-info p.right,
.footer-info .designed,
.site-info .copyright span:nth-child(2) {
    display: none;
}

Pavel
Jan 8
Here’s some CSS code that will help you change some colors:

/* Header bar at the top */
.navbar {
    background: #52B1A9;
}

/* Header bar when scrolling */
@media screen and (min-width: 48em)
.headroom--not-top .navbar {
    background: #52B1A9;
}

/* Header bar on he homepage */
@media screen and (min-width: 48em) {

    .has-header-image.home.blog .headroom--not-top .navbar, .has-header-image.inspiro-front-page .headroom--not-top .navbar, .has-header-video.home.blog .headroom--not-top .navbar, .has-header-video.inspiro-front-page .headroom--not-top .navbar {
        background: #52B1A9;
    }

}

/* Footer bar */
.site-footer {
    background: #52B1A9;
}

.wp-block-image figcaption {
	font-size: 20px;

There are several syntactical errors in your CSS, so it does not work. Specifically, these human sentences are wrong here:

Pavel
Jan 8
Here's some CSS code that will help you change some colors:

If you remove that – and only that – then your color statement should work.

threadi that worked thank you! do you know how to make it the same color when I start to scroll? it stays the same color on the homepage, but changes to black on this page. https://tucsonyogacollective.com/joana-carichner

thanks!

I cannot see that the change worked. You can change the color of the header if it is fixed during scrolling with:

.headroom--not-top .navbar {
   background-color: red;
}

thanks so much for your responses threadi ??

i added the script you shared, but the nav bar is still changing to black when I scroll on all pages other than the homepage (example page: https://tucsonyogacollective.com/diane)

any ideas? thank you!

see all my CSS below

.designed-by, #footer-copy .wpzoom, #footer .wpzoom, .site-info .designed-by, .site-info p.right, .footer-info .designed, .site-info .copyright span:nth-child(2) { display: none; }
.designed-by,
.site-info .copyright,
#footer-copy .wpzoom,
#footer .wpzoom,
.site-info .designed-by,
.site-info p.right,
.footer-info .designed,
.site-info .copyright span:nth-child(2) {
    display: none;
}

/* Header bar at the top */
.navbar {
    background: #52B1A9;
}

/* Header bar when scrolling */
@media screen and (min-width: 48em)
.headroom--not-top .navbar {
    background: #52B1A9;
}

/* Header bar on he homepage */
@media screen and (min-width: 48em) {

    .has-header-image.home.blog .headroom--not-top .navbar, .has-header-image.inspiro-front-page .headroom--not-top .navbar, .has-header-video.home.blog .headroom--not-top .navbar, .has-header-video.inspiro-front-page .headroom--not-top .navbar {
        background: #52B1A9;
    }

}

/* Footer bar */
.site-footer {
    background: #52B1A9;
}

.wp-block-image figcaption {
	font-size: 20px;
	
.headroom--not-top .navbar {
   background-color: #52B1A9;
}

You have a syntax-error again in your code. There is a } missing:

.wp-block-image figcaption {
	font-size: 20px;
	
.headroom--not-top .navbar {
   background-color: #52B1A9;
}

Correct:

.wp-block-image figcaption {
	font-size: 20px;
}

.headroom--not-top .navbar {
   background-color: #52B1A9;
}

An also above is faulty:

@media screen and (min-width: 48em)
.headroom--not-top .navbar {
    background: #52B1A9;
}

Correct:

@media screen and (min-width: 48em)
.headroom--not-top .navbar {
    background: #52B1A9;
}
}

I would suggest to learn some CSS-basics: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

wow, thank you threadi! all is working now.

and i agree, i have a lot of CSS basic learning to do for sure. very much appreciate your help today, your kindness has not gone unnoticed.

take care!

• This reply was modified 2 years, 8 months ago by illuloid.

Glad if I could help. You are welcome to set the topic to solved.