cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Phineas
Post Prodigy
Post Prodigy

Adjust Hover / Click Settings in Portals Header

Where and how to I program the buttons on the header to a certain closer and hover and on click?

As currently configured the user is unable to discern which page they are on based on the header buttons, as the hover color doesn't stay on once the button is selected and the page is opened.

 

Phineas_0-1642181249007.png

 

3 ACCEPTED SOLUTIONS

Accepted Solutions
Manar
Super User
Super User

Hi @Phineas ,

This can be controlled using css, here is how to find it:

1- open chrome dev tools, using the arrow, hover over the exact button you want to style

Manar_0-1642188736112.png

 

2-Filter Style section to get :focus elements 

 

Manar_3-1642189080532.png

 

 

 

3- now its the fun part, you can modify anything or add anything. for example i want to change font color of the selected page from nav bar to red 

 

Manar_2-1642188999566.png

 

 

4- last step is to click on the bootstrap that you changes, copy all and save into note pad (.css) then upload it to portal

 

Manar_4-1642189178272.png

 

 

 

hope this help

 

Thank you,
Manar

If you like this post, give it aThumbs Up. Where it solved your query, mark it as a SOLUTION so it can help other people!

View solution in original post

ragavanrajan
Super User
Super User

Hi @Phineas 

 

Please follow the solution from @Manar . You can write your custom CSS by following the exact instructions from Manar. In addition, if you want to apply the CSS for only the home page, then below is the guide 

 

In portal management 

1. Under Content > Web pages> Look for "Home" page and click it 

2. Localized content > Select the home page 

3. Advanced > Custom CSS > paste in the modified CSS class which Manar described above 

 

remember to add !important tag at the end.  So it will be like below 

 

.navbar-inverse .navbar-nav > li > a:focus {
    background-color: #00BCF2;
    color: red !important;
}

 

Hope both are helpful. 

 

Hope it helps. 
------------

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

 

View solution in original post

Manar
Super User
Super User

Hi @Phineas ,

very similar, right click on the middle of the page then select "Inspect" and  use the dev tool panel to follow same steps 

 

Manar_0-1642790982357.png

 

Thank you,
Manar

If you like this post, give it aThumbs Up. Where it solved your query, mark it as a SOLUTION so it can help other people!

View solution in original post

5 REPLIES 5
Manar
Super User
Super User

Hi @Phineas ,

This can be controlled using css, here is how to find it:

1- open chrome dev tools, using the arrow, hover over the exact button you want to style

Manar_0-1642188736112.png

 

2-Filter Style section to get :focus elements 

 

Manar_3-1642189080532.png

 

 

 

3- now its the fun part, you can modify anything or add anything. for example i want to change font color of the selected page from nav bar to red 

 

Manar_2-1642188999566.png

 

 

4- last step is to click on the bootstrap that you changes, copy all and save into note pad (.css) then upload it to portal

 

Manar_4-1642189178272.png

 

 

 

hope this help

 

Thank you,
Manar

If you like this post, give it aThumbs Up. Where it solved your query, mark it as a SOLUTION so it can help other people!
ragavanrajan
Super User
Super User

Hi @Phineas 

 

Please follow the solution from @Manar . You can write your custom CSS by following the exact instructions from Manar. In addition, if you want to apply the CSS for only the home page, then below is the guide 

 

In portal management 

1. Under Content > Web pages> Look for "Home" page and click it 

2. Localized content > Select the home page 

3. Advanced > Custom CSS > paste in the modified CSS class which Manar described above 

 

remember to add !important tag at the end.  So it will be like below 

 

.navbar-inverse .navbar-nav > li > a:focus {
    background-color: #00BCF2;
    color: red !important;
}

 

Hope both are helpful. 

 

Hope it helps. 
------------

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

 

I'm using Microsoft Edge, not Google.

What are my options?

 

Edit -

Found this; I don't see "focus" option on which to apply the change.

Please advise.

Phineas_0-1642782508731.png

 

I'm using Microsoft Edge, not Google.

What are my options?

 

Edit -

Found this; I don't see "focus" option on which to apply the change.

Please advise.

Phineas_0-1642782508731.png

Manar
Super User
Super User

Hi @Phineas ,

very similar, right click on the middle of the page then select "Inspect" and  use the dev tool panel to follow same steps 

 

Manar_0-1642790982357.png

 

Thank you,
Manar

If you like this post, give it aThumbs Up. Where it solved your query, mark it as a SOLUTION so it can help other people!

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PWREduCon768x460.png

Join us at PWR EduCon - A Power Platform Conference

Learn from the top Power BI, Power Apps, Power Automate & Power Virtual Agents experts!

Users online (3,274)