web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Change background colo...
Power Pages
Answered

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

(0) ShareShare
ReportReport
Posted on by 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.

DropdownBackground.jpg
Categories:
I have the same question (0)
  • oliver.rodrigues Profile Picture
    9,449 Most Valuable Professional on at

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

    OliverRodrigues_1-1618518107554.png

     

  • Verified answer
    ragavanrajan Profile Picture
    7,044 Most Valuable Professional on at

    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:

     

    ragavanrajan_0-1618518474076.png

     

    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.

  • ragavanrajan Profile Picture
    7,044 Most Valuable Professional on at

    You beat me to it @OliverRodrigues  !! 

  • oliver.rodrigues Profile Picture
    9,449 Most Valuable Professional on at

    🤣🤣🤣🤣 @ragavanrajan 

     

  • paulsnolan Profile Picture
    179 on at

    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

  • ragavanrajan Profile Picture
    7,044 Most Valuable Professional on at

    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.?

  • paulsnolan Profile Picture
    179 on at

    Hi ragavanrajan

     

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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Introducing the 2026 Season 1 community Super Users

Congratulations to our 2026 Super Users!

Kudos to our 2025 Community Spotlight Honorees

Congratulations to our 2025 community superstars!

Leaderboard > Power Pages

#1
DP_Prabh Profile Picture

DP_Prabh 41

#2
oliver.rodrigues Profile Picture

oliver.rodrigues 35 Most Valuable Professional

#3
rezarizvii Profile Picture

rezarizvii 28

Last 30 days Overall leaderboard