(Ghost) Hide Header and Footer CSS

Some code to hide Header and Footer on: All Pages, One Page, Tag Page, Specific Post, Desktop Only, Mobile only.
All Pages
Use code to Settings > Code Injection > Site header

<!-- remove header footer - all pages -->
<style>
header#gh-navigation, footer.gh-footer.gh-outer {
    display: none;
}
</style>

image

One Page
use code to Page Code Injection

<!-- One Page -->
<style>
header#gh-navigation, footer.gh-footer.gh-outer {
    display: none;
}
</style>

image

A Specific Post
Post Code Injection

<!-- a specific blog post -->
<style>
header#gh-navigation, footer.gh-footer.gh-outer {
    display: none;
}
</style>

image

Desktop Only
Code Injection > Site header

<!- Desktop only -->
<style>
@media screen and (min-width:992px) {
header#gh-navigation, footer.gh-footer.gh-outer {
    display: none;
}
}
</style>

image

Mobile Only
Code Injection > Site header

<!-- Mobile only -->
<style>
@media screen and (max-width:991px) {
header#gh-navigation, footer.gh-footer.gh-outer {
    display: none;
}
}
</style>

image

Tag Page
Tag Code Injection

<!-- Tag Page -->
<style>
header#gh-navigation, footer.gh-footer.gh-outer {
    display: none;
}
</style>

2 Likes