Dashboards & Visualizations

where to make changes to change background color of navigation menu options dropdown.

disha
Contributor

Trying to ask very internal thing but this is te requirement of my app. I want to change the background color of navigation menu options dropdown which is white by default.
I am not able to find out which css or js file I need to approch for doing that.
Any help?

Tags (1)
0 Karma
1 Solution

sideview
SplunkTrust
SplunkTrust

Well, technically there isn't any CSS that sets the background color, because the background color is white.

That said, this CSS technically changes the background color to an off-white.

.splMenu-primary, 
.splMenu-primary a {
    background-color:#eee;
    color:#000;
} 

But you're only at the beginning, because once the background color isn't white there are some other problematic CSS rules that you then have to fight, like :

-- You'll have to tinker with .splShadow because the above CSS will produce some less-than-ideal off-white dropshadows.

-- the ul elements in the menus have some default margin that will now show up as white gaps. And you'll have to deal with that.

And very probably several other side quests that I haven't thought of.

One idea is to simply look through the Splunkbase apps, try and find one that changes the look and feel, download them, take a look at their CSS in Firebug and get some ideas there.

View solution in original post

sideview
SplunkTrust
SplunkTrust

Well, technically there isn't any CSS that sets the background color, because the background color is white.

That said, this CSS technically changes the background color to an off-white.

.splMenu-primary, 
.splMenu-primary a {
    background-color:#eee;
    color:#000;
} 

But you're only at the beginning, because once the background color isn't white there are some other problematic CSS rules that you then have to fight, like :

-- You'll have to tinker with .splShadow because the above CSS will produce some less-than-ideal off-white dropshadows.

-- the ul elements in the menus have some default margin that will now show up as white gaps. And you'll have to deal with that.

And very probably several other side quests that I haven't thought of.

One idea is to simply look through the Splunkbase apps, try and find one that changes the look and feel, download them, take a look at their CSS in Firebug and get some ideas there.

disha
Contributor

Thanks for guiding me one the right path. I have downloaded some apps and looked the css. Its working now.
Thankyou so much.

0 Karma
Get Updates on the Splunk Community!

Accelerating Observability as Code with the Splunk AI Assistant

We’ve seen in previous posts what Observability as Code (OaC) is and how it’s now essential for managing ...

Integrating Splunk Search API and Quarto to Create Reproducible Investigation ...

 Splunk is More Than Just the Web Console For Digital Forensics and Incident Response (DFIR) practitioners, ...

Congratulations to the 2025-2026 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...