cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
paulsnolan
Helper IV
Helper IV

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

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.

1 ACCEPTED SOLUTION

Accepted Solutions
ragavanrajan
Super User
Super User

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.

View solution in original post

7 REPLIES 7
OliverRodrigues
Super User II
Super User II

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

 




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.

Power Apps Portals Super User


Oliver Rodrigues


 

ragavanrajan
Super User
Super User

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.

View solution in original post

You beat me to it @OliverRodrigues  !! 

OliverRodrigues
Super User II
Super User II

🤣🤣🤣🤣 @ragavanrajan 

 




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.

Power Apps Portals Super User


Oliver Rodrigues


 

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

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

Hi ragavanrajan

 

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

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (1,899)