(Ghost) Change Header Background Color

Some code to change header background color on Ghost Blog.

All Pages
use code to Code Injection (Site header)

<!-- header background color - all pages -->
<style>
header#gh-navigation {
    background-color: #f1f;
}
</style>

One Page
Use code to Page Code Injection (Page header)

<!-- One Page -->
<style>
header#gh-navigation {
    background-color: #f1f;
}
</style>

A specific blog post
Use code to Post header code injection

<!-- a specific blog post -->
<style>
header#gh-navigation {
    background-color: #f1f;
}
</style>

Desktop Only
Use code to Code Injection (Site header)

<!- Desktop only -->
<style>
@media screen and (min-width:992px) {
  header#gh-navigation {
    background-color: #f1f;
}
}
</style>

Mobile Only
Use code to Code Injection (Site header)

<!-- Mobile only -->
<style>
@media screen and (max-width:991px) {
  header#gh-navigation {
    background-color: #f1f;
}
}
</style>

Tablet Only
Use code to Code Injection (Site header)

<!-- Tablet Only -->
<style>
@media screen and (max-width:991px) and (min-width:768px) {
  header#gh-navigation {
    background-color: #f1f;
}
}
</style>

Tag
Use code to Tag Code Injection (header)

<!-- Tag Page -->
<style>
header#gh-navigation {
    background-color: #f1f;
}
</style>

1 Like