CODEWITHSUNDEEP
htmlcssgithub-pagesjekyll-theme
Creepybits
Creepybits

Reputation: 63

Custom header image at github pages with jekyll-theme

I'm using Jekyll-theme Cayman, and I like it because it's simple and clean. However in the header there's text with the page/site title and description, which seems to be defined in the header in _layouts/page.html and looks like this.

<header class="page-header" role="banner">
      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
        {% if site.github.is_user_page %}
        <a href="{{ site.github.repository_url }}" class="btn">View on GitHub</a>
        {% endif %}
      {% if site.show_downloads %}
        <a href="{{ site.github.zip_url }}" class="btn">Download .zip</a>
        <a href="{{ site.github.tar_url }}" class="btn">Download .tar.gz</a>
      {% endif %}
    </header>

I've been trying to remove the text and instead use a custome image, while still keeping the background color of the header. I have tried to edit the header itself in _layouts/page.html but can't make it work the way I want.

I've also tried to make changes to _site/assets/css/style.css as following

From:

.page-header { color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957); }
@media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } }
@media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }

To:

.page-header { color: #fff; text-align: center; background-color: #159957; background-image: linear-gradient(120deg, #155799, #159957); image: "https://URLtoImage.png"; }
@media screen and (min-width: 64em) { .page-header { padding: 5rem 6rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .page-header { padding: 3rem 4rem; } }
@media screen and (max-width: 42em) { .page-header { padding: 2rem 1rem; } }

I'm not sure if I do it wrong, but wither way it changes back to the way it was before I edited it.

I've also tried to add a custom header as css directly at the page I want it, such as:

<style>
  .myheader {
    <a href="URLtoImage.png"</a>
}
</style>

And changed the:

<header class="page-header" role="banner">

To:

<header class=myheader" role="banner">

But that doesn't seem to do the trick either. I'm not really sure what more I can try.

Upvotes: 4

Views: 1310

Answers (1)

braxton
braxton

Reputation: 52

What you're doing now with your code is linking to an image. The code you have now, <a href="URLtoImage.png"></a>, means that when you click on the text in the .myheader class, it will take you to a preview of the image at the URL.

If I'm understanding correctly, you want to add an image to your nav bar /header, rather than the text. In this case you would need to code the image into your header below the <header> tag before the <h1> and <h2> tag.

Since I'm not super well versed in headers and nav bars, this may be your best direction / may help.

Upvotes: 0

Related Questions