# Hoe verander ik zowel de hovertekst als de achtergrondkleur van het header-menu?

**URL:** https://meta.discourse.org/t/how-do-i-change-both-the-hover-text-and-background-color-of-the-header-menu/276460
**Category:** Development
**Tags:** css, brand-header
**Created:** [25 oktober 2022 om 12:36 UTC](https://meta.discourse.org/t/how-do-i-change-both-the-hover-text-and-background-color-of-the-header-menu/276460 "2022-10-25T12:36:13Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![rickwatson](https://avatars.discourse-cdn.com/v4/letter/r/3bc359/32.png) [@rickwatson](https://meta.discourse.org/u/rickwatson)
#### Post date: [25 oktober 2022 om 12:36 UTC](https://meta.discourse.org/t/how-do-i-change-both-the-hover-text-and-background-color-of-the-header-menu/276460/1 "2022-10-25T12:36:13Z")

</div>

How do I change both the hover text and background color of the header menu?  
I am not skilled with CSS?

The code and where to drop it would be helpful, thanks!

@vinothkannans

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [25 oktober 2022 om 16:40 UTC](https://meta.discourse.org/t/how-do-i-change-both-the-hover-text-and-background-color-of-the-header-menu/276460/2 "2022-10-25T16:40:53Z")

</div>

Hey @rickwatson, here’s some code to help you out. You will need to update the color/background-color values to be suitable to how you’d like it to look. Placing these in the `common.css` tab should work.

**Background Color of Header Menu:**

```scss
.b-header {
   background-color: var(--tertiary);
}

```

**Links**

```scss
.b-header .nav-pills>li>a {
    color: var(--secondary);
}

```

**Links (on hover)**

```scss
.b-header .nav-pills>li>a:hover {
    color: #001aff;
    background-color: red;
}

```

In regards to what values you can provide to the `color` and `background-color` properties, see [here](https://developer.mozilla.org/en-US/docs/Web/CSS/color) for more information. You can enter hex color codes, rgba values, hsa values, etc.

However, it’s recommended whenever possible to use existing CSS variables whenever possible so that you can maintain things like dark mode support.

You can find out what variables exist on your site and what colors they correspond to by checking in your browser’s developer tools [(🔗 how to access)](https://balsamiq.com/support/faqs/browserconsole/).

Once open check in the Styles tab for the declarations in `color_definitions.scss` on the `:root` selector.

 ![example](https://global.discourse-cdn.com/meta/original/4X/d/c/0/dc07cad987e00050d0d3ad461032f21dd5dae177.png)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [24 augustus 2023 om 15:21 UTC](https://meta.discourse.org/t/how-do-i-change-both-the-hover-text-and-background-color-of-the-header-menu/276460/3 "2023-08-24T15:21:30Z")

</div>

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