cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Phineas
Resolver III
Resolver III

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
Resolver IV
Resolver IV

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

 

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
Resolver IV
Resolver IV

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

 

View solution in original post

5 REPLIES 5
Manar
Resolver IV
Resolver IV

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

 

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

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
Resolver IV
Resolver IV

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

 

View solution in original post

Helpful resources

Announcements
User Group Leader Meeting January 768x460.png

Calling all User Group Leaders!

Don't miss the User Group Leader meetings on January, 24th & 25th, 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (2,694)