To change the color of the header across the top of the Speed Feed WordPress theme, add the CSS for your desired header colors to your site.
(How to add CSS to your site.)
Below are some sample colors. Note that each sample has the CSS code that you must add to your site to get that color for your header.
Header Color Samples
Black
CSS
/* Black header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #000;
}
/* Text color for the Black header */
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #479ae6;
}
Green Gradient
CSS
/* Green gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #195D5F;
background-image: linear-gradient(to right, #195D5F, #C5D144);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Warm Gradient
CSS
/* Warm gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #B8737C;
background-image: linear-gradient(to left, #B8737C, #E4AB73);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Sunny Ocean Gradient
CSS
/* Sunny Ocean gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #49B7D4;
background-image: linear-gradient(to left, #49B7D4, #ECE853);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Coral Gradient
CSS
/* Coral gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #EB7D5E;
background-image: linear-gradient(to right, #EB7D5E, #d5b3d2);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Orange-blue Gradient
CSS
/* Orange-blue gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #FD7E19;
background-image: linear-gradient(to right, #FD7E19, #5D87CF);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Blue Gradient
CSS
/* Blue gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #A1BEA4;
background-image: linear-gradient(to right, #A1BEA4, #102BC2);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Blue-pink Gradient
CSS
/* Blue-pink gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #3F5EFB;
background-image: linear-gradient(to right, #3F5EFB, #FC466B);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Yellow Gradient
CSS
/* Yellow gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #ffd659;
background-image: linear-gradient(to right, #ffeebc, #ffe8a4, #ffe28c, #ffdc73, #ffd659);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Dark Turquoise Gradient
CSS
/* Dark Turquoise Gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #387765;
background-image: linear-gradient(to left, #387765, #80D195);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Bright Turquoise Gradient
CSS
/* Bright Turquoise Gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #0DF2C8;
background-image: linear-gradient(to right, #0DF2C8, #E6CC83);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Pink Gradient
CSS
/* Pink gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #FF9A9E;
background-image: linear-gradient(to right, #FF9A9E, #FAD0C4);
}
#site-title,
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #000;
}
Blue-mauve Gradient
CSS
/* Blue-mauve gradient header */
#masthead,
#site-navigation > input:checked + #primary-menu {
background-color: #49B7D4;
background-image: linear-gradient(to right, #7C89E4, #9B4E49);
}
#site-title{
color: #000;
}
#primary-menu a,
#site-navigation > label,
#site-navigation ul li {
color: #fff;
}
Questions and Comments are Welcome