Change background colour when hover over navigation menu drop-down item

(0) Share

Report

Posted on by paulsnolan

179

Hi all

I have a navigation menu with some dropdown items, see attachment for an example. When I hover over one of the items the background changes to black and the text to white. How can I change the background to another colour? I've looked in the themes but can't see an obvious class where this is set.

Categories:

Power Apps portals

DropdownBackgroun...

I have the same question (0)

All responses (7)

Answers (1)

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (1)

Report

Hi, a way you can view that is inspecting the element and click on the hover/actions properties, below an example via Edge:

Was this reply helpful? Yes No
Verified answer

ragavanrajan 7,044 Most Valuable Professional on at

Like (1)

Report
Hi @paulsnolan ,

In portal studio:

1. Click Themes > upload custom CSS > upload a file called "custom.css" or any name of your choice.

2. Paste the following code in the custom.css

.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { background-color: red !important; color: greenyellow !important; }

3. Press save > Sync Configuration > Browse website

When the portal is launched press ctrl + F5 on your screen to see the effect.

Output:

Hope it helps.

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

You beat me to it @OliverRodrigues !!

Was this reply helpful? Yes No
oliver.rodrigues 9,368 Most Valuable Professional on at

Like (0)

Report

🤣🤣🤣🤣 @ragavanrajan

Was this reply helpful? Yes No
paulsnolan 179 on at

Like (0)

Report

Thanks ragavanrajan

I've created and uploaded a custom css file as suggested. However, the styling in the portalbasictheme.css is taking precedence and the new custom theme is being ignored. Using f12 in the browser I can the new file is there but the color settings are crossed out

Was this reply helpful? Yes No
ragavanrajan 7,044 Most Valuable Professional on at

Like (0)

Report

Hi @paulsnolan ,

You can see the evidence of my screenshot. Because we have used ! important tag this should be the first precedence. Did you press the ctrl +f5 ?

Can you also try in incognito window pls.?

Was this reply helpful? Yes No
paulsnolan 179 on at

Like (1)

Report

Hi ragavanrajan

My bad , I'd missed off the !important tag. That works, thank you ever so much 😁

Was this reply helpful? Yes No