Discourse Hub Nav Buttons - Configurable?

Hey everyone! :wave:

Does anyone happen to know if the navigation buttons at the top of the Discourse Hub mobile app are configurable in colour? It’s not quite clear whether they are part of the app itself or the specific forum.

One of my users sent this screenshot:

Where it seems to have just pulled the header colour from the forum.

It’d be great if there was a way to make those navigation icons white (which I already did for the search and menu on the forum itself).

I checked a few other instances out via the hub app, and these icons were always the same colour, which makes me think that either most people leave it as default, don’t use the hub app, or it’s not possible.

2 Likes

I’ll chip in as one of my community members (which happens to be the same individual), has mentioned that this affects our community too, but we use very different colours

1 Like

Hello @simonb, @Robert_McIntosh,

Yes, the color of those icons can be configured. First of all, though, you should know that the default color for these icons is derived from the header_primary color variable. On the Sphere community, I see that the theme overrides the color generated from that variable, but only for the regular header buttons (which makes sense, the iPad nav is, well, only visible on iPads).

A quick fix would be to add the same CSS you’re using for your header icons to the DiscourseHub nav icons. You would need to target the .footer-nav .d-icon element.

A better fix is to remove the override in your theme, and modify the header primary color variable. That will have repercussions on other header text (titles etc), but it should work.

Let me know how it goes.

5 Likes

This doesn’t seem to have worked. It’s made the search and menu options grey again. Unless I’m doing it wrong, which is very possible :joy:

Sorry, I’m not following! Modify it how? The aqua used is our brand colour, so that needs to stay.

No worries, since you are a customer I went in and fixed the SCSS on your site directly. I used the override, because our color generation for the header primary color didn’t quite work on your color scheme (I will raise an internal issue about this).

5 Likes

Thank you so much @pmusaraj - Much appreciated! :heart:

2 Likes