Question on changing the color of a dropdown

[norcoscia]

I guess this should be easy but I cannot figure it out. I want to add a dropdown menu to my project. That was easy. Next I wanted to change the color of the dropdown menu box (see green box below) to the same background color as the main menu (in the orange box). No matter what I change the background does not change color and the text does not want to change either.

I’m sure someone is going to say “this is because of bootstrap 4 - that is how it works” but I don’t understand that and I don’t understand why the controls for the item can’t work as one would expect.

Please help, thx

Norm

[ben]

Something like this should work

.dropdown div {
background: orange;
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

depending on the class that you have given the dropdown.

[norcoscia]

Thanks Ben, I don’t really understand the styles panel so sticking my finger in there is scary. Could you tell me what section (where) I should insert that text? First item or last last or somewhere else - heck I don’t see anything in there that looks orange (or any orange hex codes) so not even sure that is the place you are talking about.

Sorry I’m (still) so dumb on this but I just don’t think I’m smart enough to figure out the styles panel or the DOM stuff

[Teodor]

Why not using the design panel then

[norcoscia]

When I change the background color in the design panel the color does not change?

[Teodor]

Well, probably you have not selected the right element in design view
Works fine for me:

[norcoscia]

Does not work for me and I’m on the right element - does it matter that I’m in an includes file?
Do I need to do something with the class (second picture)?

[Teodor]

Please provide a link to this page, where I can check this.

[norcoscia]

http://www.mypizzamaster.com

Thanks for the help!

[Dave]

Remember to clear browser cache as well as any caching provided by NGINX/CloudFlare/your host etc.

Sometimes your changes may not be reflected immediately.

[norcoscia]

I got this to work by adding this in the app structure for the dropdown menu.

dropdown-menu style9 bg-danger text-light

and for each drop down menu word item – I selected as depicted below - sure wish the design panel could override everything and be used to do this.