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,471 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,471 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!

Congratulations to the April Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
Valantis Profile Picture

Valantis 59

#2
11manish Profile Picture

11manish 53

#3
Vish WR Profile Picture

Vish WR 29

Last 30 days Overall leaderboard