Update Navigation component background color

[pablo.estrada]

• Goal: I am trying to update the background color of the entire container of the Navigation component.

• Steps: I have tried updating every styling option, but none of these update the navigation component container background. How can I get this styling to work?

[pyrrho]

You should be able to use the component's name in the App (or company level) CSS overrides:

The documentation I started with was a little wonky, but I found this post which had a pretty structured breakdown of the "older" div class method. This guide still gets you to the component name, but it seems the word 'widget' is important now...

How to use Custom CSS in Retool Apps

There are 2 ways to add custom CSS to Retool apps. Globally for all Retool apps — you can add any CSS you'd like to the "Preloaded CSS" area of the org settings -> advanced page (admin only) Locally to 1 Retool app — click the three dots (top-right menu), then scripts and styles. CSS will affect all components in the app. Please note, we strongly recommend using Retool's built-in style and theme options whenever possible. Class names and DOM structure may change as new features are added that …

[pablo.estrada]

This is for a module. Does this mean that I will need to override the CSS of every single app I import this module into?

[pyrrho]

No, but you will need to add the CSS to your account's global settings. Since it is one module going into many apps, the component name should remain the same.

I haven't personally tested the styles this way, but it should work.

[Darren]

Interesting! I haven't seen this particular issue before, but did some quick testing and there definitely isn't a built-in option to style the background of the navigation component. Thanks for flagging this, @pablo.estrada!

I'll talk to the team about a fix and update you here as soon as I can. In the meantime, @pyrrho's suggestion to use custom CSS is definitely a functional workaround, although one that is complicated further by the fact that you're using a module. Assuming you only have the one navigation component on the page, the following should work:

I was sadly unable to write a more specific selector using the _retool-container-myModule1::navigation1 pseudo-class, but the principle is sound! My general recommendation whenever writing custom CSS is to open the app as a viewer and inspect it in order to get accurate class names.

I hope that helps! Let me know if you have any follow-up questions.

EDIT: The other simpler option that just occurred to me is to put the nav component inside a container and set the background of the container using the UI options!