How do you remove header on Github Pages?

Question

I am trying GitHub Pages for my developer blog post, unfortunately I am having a hard time deleting the header part after choosing a theme.

Even though I already edited the Readme.md, the header is still there and I can't even remove or edit it. Do you have any idea on how to remove or edit it? There are only 2 files on my repositories: Readme.md and _config.yml

That depends on the theme you are using, copy theme files to your site and edit them — marcanuy, Sep 23 '17 at 03:45
I just choose a theme under settings of repository. There are only 2 files on repositories. Do I need to download the whole theme then commit it to my repo? — Willy David Jr, Sep 23 '17 at 03:47
I forgot to say, you don't need to commit all the theme files, you can just copy the file you modify — marcanuy, Sep 23 '17 at 03:49
I see, I really don't know how it will work since there is no file on repositories where I can see the layout and other related stuffs and update it, but I will try. — Willy David Jr, Sep 23 '17 at 03:51

Carl Walsh · Accepted Answer · 2017-12-08T07:53:01.280

22

I found you can customize your site CSS to hide the header by creating the file:

/assets/css/style.scss

---
---

@import "{{ site.theme }}";

header {
  display: none;
}

This is a closed issue on Github.

That said, you may want to override the HTML layout, so your site doesn't unexpectedly break.

edited Dec 08 '17 at 07:53

answered Oct 06 '17 at 15:02

Carl Walsh

6,100
2
46
50

luaphacim · Answer 2 · 2023-03-10T21:33:36.663

I encountered the same issue with the default Jekyll theme (primer). I found this closed issue very helpful.

My steps to resolve with the default GitHub pages theme, based on the post linked above:

Add _config.yml in the root of the GitHub Pages repo
Add the following lines to _config.yml:

name: luaphacim's site
title: null

Another workaround for this theme would be to give your page the same title as the title you specify in _config.yml.

score 2 · Answer 3 · 2021-10-12T00:54:38.760

First, to customize the Jekyll SEO Tag, you can set the name of the site as an empty string and nullify the title itself, so that it does not appear to the right of the title of each page — create this file in the root of your repository:

_config.yml

name: ""
title: null

Then, to completely remove the header block from your page, you can override the default layout. Copy the original file default.html to the _layouts folder of your repository and remove this block:

<header>
  <!-- TL;DR -->
</header>

By default GitHub uses the Primer theme — it can also be customized in the same way as other themes.

^{See also: Editing the footer in GitHub pages jekyll's default minima theme}

score 0 · Answer 4 · answered Dec 23 '20 at 12:38

0

Best approach to me is to get the templates for the layout you have chosen, add these to your repository, and update them to remove the header. Worked for me.

answered Dec 23 '20 at 12:38

Bart Roozendaal

11
2

score 0 · Answer 5 · answered Apr 02 '22 at 14:18

You can resolve this by the following steps.

Clone / download the pages-themes/hacker repository.
Copy the assets folder into your repository.
Open the style.scss file located under /assets/css/style.scss folder.

Add the following code into the file.

@import "{{ site.theme }}";

header {
    display: none;
}

How do you remove header on Github Pages?

5 Answers5

Linked