Basic Drupal / Bootstrap practical question - overriding a color for a region

Question

I've been hacking for a while and think I am doing things in an incorrect way. I'd like to final stop embarrassing myself.

This is very simple practical.

Core d8 site with a Barrio Bootrap Subtheme. I used the script to create my subtheme and installed/gulped it to 'compile' it.

Note that in this basic page, the user-account links are light blue text on dark-blue background. Not a good look.

I think the first place to look for color pallet things are in the variables.scss and let the gulp pick up the change.

But in my case I am trying to target just one block.

So I inspect the element and think that I see a class being applied via the twig templates called "menu--account" which seems aptly named. But I don't see any class variables being applied in the inspector so I am thinking a forward thinking developer put that class there for me to use but in default it is not present.

So, I think my task is to override (in this specific case, create) the class and add my color attribute.

Is this in the right direction?

If so, the practical part is.... where do I add that class? In one of my top level scss files such as the variables.scss?

This is the help for scss syntax for classes. Do I just change "body" to my class "menu--account"? $font-stack: Helvetica, sans-serif; $primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

As ai was trying to put together a good question I may (or not) have figured it out. We'll see...

Answer 1

Yep, that did it. My first attempt with

.menu--account {  color: $white;
} 

didn't work as intended but I DID see my new class show up in inspector.

So I just had to find the right classes to target.

These worked when added to the bottom of my variables.scss but I need to check the class names for when I am not logged in.

.nav-link--user {
  color: $white;
}
.nav-link--user-logout {
  color: $white;
}