How to change the colour of navigation bar

Grafana Dashboards
1

Hello Team,

Hope all are doing good.

I am using Grafana v11.6. I have build grafana through source code and followed all the instruction through grafana official github instructions (grafana/contribute/developer-guide.md at 57658abdb1533c0859180002b932cb9f378a7202 · grafana/grafana · GitHub)

I want to change the colour of header or navigaiton bar ( where the logo and title is there – horizontal line )

So, I find out the two files where theme is mentioned and it changes the colours .

  1. createcolors.ts
  2. palette.ts
    I tried with these changing all the colour values in palette.ts. but none of the value changes the top header ( the horizontal row)

but I am unable to find what element will change the colour of header or navigation bar.

Please let me know about your inputs as it would be really helpful.

Thanks ,
Yukti

3

Hi Yuktiady,

It seems you’re trying to change the color of the top header (where the logo and title appear) in Grafana v11.6, but the changes in palette.ts and createcolors.ts are not affecting it.

The issue is that those files manage colors for other elements, not the navigation bar or header. To change the header’s color, you’ll need to modify the CSS instead.

Here’s what you can do:

  1. Identify the Header CSS Class: The header is controlled by specific CSS classes like:
  • .gf-layout-header
  • .navbar
  1. Modify the CSS: You can add custom CSS to change the background color of the header. For example:

.gf-layout-header {

background-color: yellow !important;

}

  1. Rebuild Grafana: After making the CSS changes, you’ll need to rebuild Grafana for the changes to take effect.

In your Grafana source directory:

yarn install

yarn dev

  1. Use Browser DevTools: If you’re unsure about the classes, use the browser’s Developer Tools to inspect the header element. Right-click on the header and click Inspect to see which CSS is controlling it.