Gatsby.js Navbar dark when on the homepage, light when on any other child page

Viewed 12

I'm very new to using the Gatsby.js framework. We're also using the Carbon design theme. These choices were not mine but made for consistency throughout internal sites.

At this point out site is still basically the scaffolded structure resulting from running npm init gatsby.

When the site is served either via npm run serve or when hosted on enterprise GitHub pages (our production environment), when on the homepage / the left nav-bar is dark

enter image description here

and when on any other child page on the site the left nav-bar is white

enter image description here

There is a lot of abstraction using this framework so I don't see where there is explicit styling or even where it is specifically conveyed that there should be a nav-bar at all. I assume that's somewhere beneath several layers of component inheritance.

It's a small thing but it's driving me crazy. I think it's terrible UX to change colors so drastically like that on navigation. It's not at all what I expect when navigating and makes me feel like I've ended up on a different site.

Thanks, in advance, for the suggestions!

0 Answers
Related