Adjust Hover / Click Settings in Portals Header

[Phineas]

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.

[Manar · Accepted solution]

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

2-Filter Style section to get :focus elements 

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 

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

hope this help

[ragavanrajan · Accepted solution]

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.

[Phineas]

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]

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.

[Manar · Accepted solution]

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