# Reduce Header Height on Casper Theme

**URL:** <https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424>\
**Category:** Themes\
**Created:** [May 16, 2020, 8:21pm UTC](https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424 "2020-05-16T20:21:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tobetanium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tobetanium/32/7912_2.png) [@Tobetanium](https://forum.ghost.org/u/Tobetanium)\
**Post date:** [May 16, 2020, 8:21pm UTC](https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424/1 "2020-05-16T20:21:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [May 18, 2020, 7:42pm UTC](https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424/2 "2020-05-18T19:42:25Z")

</div>

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:

> <https://github.com/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:

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

```

Hope this helps! 😊

---

<div class="post-metadata">

**Author:** ![Tobetanium](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tobetanium/32/7912_2.png) [@Tobetanium](https://forum.ghost.org/u/Tobetanium)\
**Post date:** [May 18, 2020, 8:52pm UTC](https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424/3 "2020-05-18T20:52:05Z")

</div>

Awesome, thanks so much, David 🕶

---

<div class="post-metadata">

**Author:** ![donkey](https://avatars.discourse-cdn.com/v4/letter/d/bcef8e/32.png) [@donkey](https://forum.ghost.org/u/donkey)\
**Post date:** [October 16, 2020, 11:20am UTC](https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424/4 "2020-10-16T11:20:28Z")

</div>

> [@DavidDarnes](#):
>
> ```auto
> <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

 ![screenshot](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/1/1594eba9a685dcb0f86a8742379e201c7aacecd6.png)

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

 ![screenshot2](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/e/e2196f6454b83a7a15dc50aab3a2ca65add60834.png)

Any suggestions?

---

<div class="post-metadata">

**Author:** ![Tucker\_Schreiber](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/tucker_schreiber/32/11872_2.png) [@Tucker\_Schreiber](https://forum.ghost.org/u/Tucker_Schreiber)\
**Post date:** [March 4, 2021, 8:30pm UTC](https://forum.ghost.org/t/reduce-header-height-on-casper-theme/14424/5 "2021-03-04T20:30:12Z")

</div>

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