# Custom Heading

**URL:** <https://discuss.write.as/t/custom-heading/2183>\
**Category:** Customization\
**Created:** [December 14, 2020, 7:10am UTC](https://discuss.write.as/t/custom-heading/2183 "2020-12-14T07:10:20Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [December 14, 2020, 7:10am UTC](https://discuss.write.as/t/custom-heading/2183/1 "2020-12-14T07:10:20Z")

</div>

Hi. I want to upload a custom header for my blog. I can’t recall where instructions for doing that are. Any directions are appreciated. ALSO, can anyone recommend resources or help on creating a header? I’m no graphic designer, but I’m stuck on my own for now. Any ideas, resources, or suggestions are very welcome. Thank you.

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [December 14, 2020, 2:50pm UTC](https://discuss.write.as/t/custom-heading/2183/2 "2020-12-14T14:50:57Z")

</div>

> [@Share what you are working on and using!](https://discuss.write.as/t/share-what-you-are-working-on-and-using/401/139):
>
> Added a header image to my [music blog](https://nowlisteningto.dinobansigan.com/) using the CSS script below: @media only screen and (min-width: 800px) { body#collection header { padding-top: 2em; text-align: center; max-width: 100%; margin: 0 0 0 0; background-image: url('yourImage.jpg'); height: 572px; background-repeat: no-repeat; background-size: cover; } } I’m sure someone can use this and make it even better. The media query is to remove the header image when …

---

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [December 15, 2020, 5:47am UTC](https://discuss.write.as/t/custom-heading/2183/3 "2020-12-15T05:47:03Z")

</div>

Thank you, dino. I have to figure out how to work with it, but really glad to have that. Do you know if it’s possible to add other text within the header? I really wish I could add just a couple of sentences beneath the pinned menu tabs (preferably) - or beneath the tagline (just above the pinned menu tabs. Thank you for any thoughts.

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [December 15, 2020, 2:49pm UTC](https://discuss.write.as/t/custom-heading/2183/4 "2020-12-15T14:49:47Z")

</div>

Adding text within the header or after the pinned pages should be doable with JavaScript. But at the same time, I’ve never done something like that. It will take some playing around with JavaScript to get it to work.

---

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [December 20, 2020, 4:57am UTC](https://discuss.write.as/t/custom-heading/2183/5 "2020-12-20T04:57:39Z")

</div>

Thanks, dino. Any suggestions on where to find help for a small project like that?

---

<div class="post-metadata">

**Author:** ![dino](https://discuss.write.as/user_avatar/discuss.write.as/dino/32/645_2.png) [@dino](https://discuss.write.as/u/dino)\
**Post date:** [December 22, 2020, 3:08pm UTC](https://discuss.write.as/t/custom-heading/2183/6 "2020-12-22T15:08:32Z")

</div>

This would be the place to find help as far Write.as/write freely specific sites go. But Write.as really just uses _vanilla_ JavaScript, and tutorials for that can be found all over the web.

For this one, you can probably play around with the insertAdjacentHTML JavaScript method. The cool thing with this method is that it allows you to insert HTML (in your case, the text you want to add) before or after another HTML element. Here is a tutorial on how to use it:

[https://www.w3schools.com/jsref/met\_node\_insertadjacenthtml.asp](https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp)

---

<div class="post-metadata">

**Author:** ![writedirt](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/9fc348/32.png) [@writedirt](https://discuss.write.as/u/writedirt)\
**Post date:** [December 23, 2020, 8:10am UTC](https://discuss.write.as/t/custom-heading/2183/7 "2020-12-23T08:10:43Z")

</div>

Thank you, dino. That is great to have. I can tell I’m going to have to visit this when I can focus more. I’m not familiar with Java, but glad to have this. Thanks, much, again. : )
