Header not displaying on custom home page

I am testing the hosted version of ghost v3 here, and have created a custom home page by following https://ghost.org/tutorials/custom-home-page/

The problem I have run into is the header does not display only on the custom home page. I copied page.hbs to home.hbs, changed #post to #page and zipped things up, uploaded, and activated the “new” theme.

I created a page, modified routes.yaml just like the above link says to do, and that appears to work fine. Visiting / does display the proper page, and visiting /blog/ shows the right content.

The only issue is the header does not display on the custom home page.

I reproduced the error in Chrome, Firefox and mobile Safari.

Any ideas what I could be doing wrong or what I am missing?

Can you share code of your home.hbs and link to your active home page?

Apologies, I am away from my computer for a couple days due to the New Years. Should be back in about 36 hours.

My home page is actually set to private and password protected. If you want to look, more than happy to share a password with you privately.

One thing I noticed before I left yesterday is if I view source, the header HTML actually appears to be there, but is just not displaying.

My home.hbs is literally page.hbs copied but with {{#post}} changed to {{#page}}. There were no additional modifications.

Cheers!

Here is the code from home.hbs:

{{!< default}}
{{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}}

{{!-- The big featured header, it uses blog cover image as a BG if available --}}
<header class="site-header">
<div class="outer site-nav-main">
    <div class="inner">
        {{> "site-nav"}}
    </div>
</div>
</header>

{{!-- Everything inside the #post tags pulls data from the post --}}
{{#page}}

<main id="site-main" class="site-main outer">
<div class="inner">

    <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

        <header class="post-full-header">
            <h1 class="post-full-title">{{title}}</h1>
        </header>

        {{#if feature_image}}
        <figure class="post-full-image">
            {{!-- This is a responsive image, it loads different sizes depending on device
            https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
            <img
                srcset="{{img_url feature_image size="s"}} 300w,
                        {{img_url feature_image size="m"}} 600w,
                        {{img_url feature_image size="l"}} 1000w,
                        {{img_url feature_image size="xl"}} 2000w"
                sizes="(max-width: 800px) 400px,
                        (max-width: 1170px) 1170px,
                        2000px"
                src="{{img_url feature_image size="xl"}}"
                alt="{{title}}"
            />
        </figure>
        {{/if}}

        <section class="post-full-content">
            <div class="post-content">
                {{content}}
            </div>
        </section>

    </article>

</div>
</main>

{{/page}}

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
<script>
$(function() {
    var $postContent = $(".post-full-content");
    $postContent.fitVids();
});
</script>
{{/contentFor}}

Just to ensure I did not screw anything up, here is my routes.yaml:

routes:
  /:
    data: page.home
    template: home

collections:
  /blog/:
    permalink: /blog/{slug}/
    template: index

taxonomies:
  tag: /tag/{slug}/
  author: /author/{slug}/

Just to reiterate, the content from Home displays but the header does not. Although interestingly I do see the header HTML if I view-source.

Out of curiosity I wanted to see if the same issue would occur with a theme other than the default Casper, so I tested the above logic using Liebling.

Interestingly it worked correctly with Liebling - of course copying page.hbs to home.hbs and modifying {{#post}} to {{#page}} - with the proper custom home page displaying on / and the blog on /blog/ as expected.

I wonder if this is an issue specific to Casper?

Try this routes.yaml and let us know if it worked.

routes:
  /:
   data: 
     post: page.home
   template: home

collections:
 /blog/:
  permalink: /blog/{slug}/
  template: index

taxonomies:
 tag: /tag/{slug}/
 author: /author/{slug}/

Spaces and Indention are important as well.

Unfortunately that does not work. Now neither the header nor the content displays.

Here is a screenshot with the routes.yaml changes you proposed: https://imgur.com/a/Vvr0g8s

Here is a screenshot with routes.yaml restored to what I posted above: https://imgur.com/a/BOi18cu

This is now a locally hosted ghost install rather than a Ghost Pro account.

I’m also facing the same issue when using Casper Theme on my website (vamsithota.me). I have tried using page template and created a copy of page template, renamed it as page-home. In either cases the Site Navigation is missing from the home page. Unable to figure out why it isn’t working. @DavidDarnes Would you be able to help with this?

My current routes.yaml looks like this
routes:
/:
data:
post: page.home
template: page-home

collections:
 /blog/:
  permalink: /blog/{slug}/
  template: index

taxonomies:
 tag: /tag/{slug}/
 author: /author/{slug}/ 

I have decided use a different theme, until the issue with AddThis and swup.js in London Theme is fixed.

I gave up on Casper. Not only because of this issue, but also because the design ultimately did not adhere to my goals.

@scottie I think this is down to the custom sticker header that comes with Casper, you can see it in action on the demo. The home page of Casper comes with some JavaScript that makes the header stick to the top of the screen. However when you change the home page to a static page you also change the code.

Making the header come back can be done with a little bit of code added to the code injection area of that page:

<style>
site-nav-main {
    position: relative;
}
.home-template .site-nav-main .site-nav {
    opacity: 1;
}
</style>

Let us know how you get on! :v:

Now the Header is visible but not interactive and not sticky.

This is what I meant by the above comment. By changing the home page template you’re creating your own custom theme, which will in turn affect the existing code in the theme. The JavaScript code for the sticky header is here in the index.hbs file within Casper:

You’ll need to copy this code into your home page if you want the header to stick :slight_smile:

I did a poor job explaining the non-sticky & non-interative header issue. Here’s what that fixed my issues and didn’t had to add the JS code.

Add this code under Header of Code Injection of Home Page

<style>
.home-template .site-nav-main{
    z-index: 1000;
    }
.home-template .site-nav-main .site-nav{
    opacity: 1;
}
</style>
1 Like