Reduce Header Height on Casper Theme

[Tobetanium]

Hey guys,

Can anyone help me reduce the header size on the Casper theme home page?

I’d like it to be a thin black bar. Exactly the same height as on all the post pages.

Thanks,
Tobe

[DavidDarnes]

Hey @Tobetanium

You can remove the large header from the home page, which will cause the header to collapse to a consistent size, by either editing the theme templates or by adding some CSS via the site code injection.

Editing the theme mean removing this section in the index.hbs template:

TryGhost/Casper/blob/main/index.hbs#L5-L21

To hide it with CSS you can add this to your site head code injection area in Ghost admin:

<style> header.site-header-content { display: none; } </style>

Hope this helps!

[Tobetanium]

Awesome, thanks so much, David

[donkey]

@DavidDarnes

<header class="site-home-header">
    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        <div class="inner">
            {{> "site-nav"}}
            <div class="site-header-content">
                <h1 class="site-title">
                    {{#if @site.logo}}
                        <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
                    {{else}}
                        {{@site.title}}
                    {{/if}}
                </h1>
                <h2 class="site-description">{{@site.description}}</h2>
            </div>
        </div>
    </div>
</header>

Hey i’ve done this but now have an issue of there being no space below the navbar

I can’t figure out what to put to make it have a space like it does on other pages like this:

Any suggestions?

[Tucker_Schreiber]

were you able to figure this out? running into the same issue on my end.