# Customize header font and background

**URL:** <https://community.hivepress.io/t/customize-header-font-and-background/6060>\
**Category:** HivePress\
**Created:** [May 31, 2023, 2:09pm UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060 "2023-05-31T14:09:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Protravaux](https://community.hivepress.io/user_avatar/community.hivepress.io/protravaux/32/5616_2.png) [@Protravaux](https://community.hivepress.io/u/Protravaux)\
**Post date:** [May 31, 2023, 2:09pm UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/1 "2023-05-31T14:09:22Z")

</div>

Hello,

We would like to modify our header like the background color and also the font of the characters and the order of the pages, can you please help us ?  
Also we would like to extend the cover picture to the header to make a unit cover picture, please tell us how to do it

Kind regards  
Protravaux

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [June 1, 2023, 7:16am UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/2 "2023-06-01T07:16:58Z")

</div>

Hi,

Unfortunately, there’s no such feature, it would require a custom implementation.

If customizations are required for your site, please try customizing it using the collection of code snippets [Search · user:hivepress · GitHub](https://gist.github.com/search?q=user%3Ahivepress) and other developer resources, or consider hiring someone for custom work [https://fvrr.co/32e7LvY](https://fvrr.co/32e7LvY)

Alternatively, you can send your proposal via this link, and we will estimate the implementation [Request a Quote](https://docs.google.com/forms/d/e/1FAIpQLSfPjESLtpUALFXAgoNx53DiyPYqbOVAwes628b9vPoPJP5D_A/viewform)

---

<div class="post-metadata">

**Author:** ![Protravaux](https://community.hivepress.io/user_avatar/community.hivepress.io/protravaux/32/5616_2.png) [@Protravaux](https://community.hivepress.io/u/Protravaux)\
**Post date:** [June 1, 2023, 10:03am UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/3 "2023-06-01T10:03:17Z")

</div>

Can we modify it for the theme file editor (style.css) ? because we tried and it didn’t work. Or should we introduce the changes in appearance additional CSS ?

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [June 2, 2023, 8:28am UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/4 "2023-06-02T08:28:45Z")

</div>

Hi,

You can modify this file using a child theme or make changes using this doc [How to add custom code snippets - HivePress Help Center](https://help.hivepress.io/article/23-how-to-add-custom-code-snippets)

---

<div class="post-metadata">

**Author:** ![Protravaux](https://community.hivepress.io/user_avatar/community.hivepress.io/protravaux/32/5616_2.png) [@Protravaux](https://community.hivepress.io/u/Protravaux)\
**Post date:** [June 15, 2023, 5:37pm UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/5 "2023-06-15T17:37:27Z")

</div>

We want to have the same style as Jobhive. In a way that the image goes until the navigation bar. We tried many changes in the CSS and hired someone from Fiver but it did not work. It seems like it’s a theme issue.  
We tried the code below, it worked but we cannot click on the navigation bar anymore. We changed the z-indexes as well but it doesn’t seem to work.

```auto
.site-header {
  position: relative;
  z-index: 1;
}

.home .header-navbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px; /* Adjust the height of the navigation bar as needed */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  pointer-events: auto; /* Add this line to enable pointer events on the navigation bar */
}

.home .header-navbar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url(https://protravaux.ma/wp-content/uploads/2023/06/nolan-issac-K5sjajgbTFw-unsplash.jpg) center/cover no-repeat;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* Add any additional styles to the navigation bar elements as desired */
.header-navbar__start,
.header-navbar__middle,
.header-navbar__end {
  position: relative;
  z-index: 2;
}

```

---

<div class="post-metadata">

**Author:** ![andrii](https://community.hivepress.io/user_avatar/community.hivepress.io/andrii/32/2951_2.png) [@andrii](https://community.hivepress.io/u/andrii)\
**Post date:** [June 16, 2023, 6:54am UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/6 "2023-06-16T06:54:30Z")

</div>

Hi,

Sorry, there’s no simple code snippet for this, it would require a custom implementation. If customizations beyond the available features are required for your site, please consider hiring someone for custom work [https://fvrr.co/32e7LvY](https://fvrr.co/32e7LvY)

---

<div class="post-metadata">

**Author:** ![system](https://community.hivepress.io/user_avatar/community.hivepress.io/system/32/13990_2.png) [@system](https://community.hivepress.io/u/system)\
**Post date:** [July 16, 2023, 6:54am UTC](https://community.hivepress.io/t/customize-header-font-and-background/6060/7 "2023-07-16T06:54:48Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.