How to change hover background color in Bootstrap 4 nav dropdown-item

I’m trying to figure out how to change the background color in my navbar’s dropdown when I hover over any of the items listed in it. Currently the entire background of the dropdown menu displays in the light grey I’ve coded in the CSS. Please see my screen grab of what I’ve setup in PineeGrow and let me know why it’s not working the way I want it to? Thanks in advance to anyone’s suggestion or advice.

Hello @randyrie

When in doubt, your browser inspector can be a great help because you can force the state of the elements and check the result.

You can even change the values “live” as in the following screenshots;

Thank You @Emmanuel

Every time I post a help request on this forum, I not only get a solution but also a help guide/tip for me to resolve future issues on my own. I had the Web Developer installed on Firefox but had no idea you could use the inspector to locate and test various CSS values.

THIS IS GREAT TO KNOW!! :orange_heart: :orange_heart:

I’ve added the code to my CSS and it works great (https://rjrwebz.com/universe) - Thanks again!

1 Like

Thanks Randy!
My opinion is that it’s always better to give leads to tools and techniques than ready-made solutions :slight_smile:

1 Like

Yes, very helpful indeed. I even learned that transparency is apparently noted by a slightly longer hex code for the colour.