How to edit header of Casper theme?

Themes
1

This is the default homepage header:

1080×969 123 KB

how can i do like this (for homepage):

1080×397 86.8 KB

My English is not good. I hope you understand me. Thanks.

2

Hi,

Styling of the navigation changes based on the body class. In the home page it is " class=“home-template”. That class overrides some of the styling.
You can override it with Code Injection. Go to the Site Footer section and add these lines:

<style>
.home-template .gh-head.has-cover {
background: var(--ghost-accent-color);
}
.home-template .gh-head {
    position: relative;
}
.home-template .gh-head-logo {
    display: block;
}
.home-template .gh-head-menu {
    margin-left: 0;
}
    
</style>

That should take care of navigation at the top.

As for the Hero image (big image and site title at the top), you need to remove that from the actual html by updating your theme(either updating the files directly or downloading, updating and uploading again)
You can go into your them folder(content/themes/casper), update the index.hbs file. The section that paints the hero image is

 <div class="site-header-content">
  {{#if @site.cover_image}}
......
 <p>{{@site.description}}</p>
</div>

You can remove it or comment it out with

<!--div class="site-header-content">
  {{#if @site.cover_image}}
......
 <p>{{@site.description}}</p>
</div-->
1 Like
3

Thank you very much, it worked. But there is a small problem. This is how the mobile theme became after the settings I made:

IMG_20210814_182640
IMG_20210814_1826401080×514 121 KB

4

You can add the following code to the end of the style section of the code I provided before (just before closing style tag

...
@media (max-width: 900px) {
.home-template .gh-head .gh-head-logo {
    display: none;
    }   
  }
</style>
5

Hello, I am exactly trying to make the same with the last version of the Casper Theme, I added the Styles using code injection, after commenting the div (step 2) the home has no header anymore. Can you make an updated version? here the SC: https://github.com/TryGhost/Casper/blob/main/index.hbs
Thank you!!