How to edit header of Casper theme?

This is the default homepage header:

how can i do like this (for homepage):

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

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

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

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>