Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Pages - General Discussions
Unanswered

Highlight webpage Buttons on the Header Menu, when a specific webpage is accessed?

(0) ShareShare
ReportReport
Posted on by 520

Hi,
So in this example I have two webapges, aka 2 buttons

Robert94_0-1660207613916.png


I want, when accessing the Projetos button, that button to be highlighted with a color, maybe coloring the text, or adding a rectangular in the background of it. This indicated to the user that he is on that webpage, so the highlighting will show as long as the user is in that webpage.

Categories:
  • Robert94 Profile Picture
    520 on at
    Re: Highlight webpage Buttons on the Header Menu, when a specific webpage is accessed?

    Hi @ragavanrajan , thank you for your response.
    I can`t seem to find the Button name, I tried with inspect and with the html code inside the Portal Editor, while selecting the Button, but with no success.
    This is how the inspect looks

    Robert94_0-1660292805351.png

     


    Also, what I want to achieve, is to keep that button highlighted the whole time I`m in that page, is that what the code you provided will do?

  • ragavanrajan Profile Picture
    7,036 Most Valuable Professional on at
    Re: Highlight webpage Buttons on the Header Menu, when a specific webpage is accessed?

    Hi @Robert94 

    Yes, it is possible. Please try the following in your localized content > custom CSS section. 

     

    .button1:hover {
     color: black !important;
     background-color: green !important;
     border-color: red !important;
    }

    Note: Add CSS class for your button. In my case: It is button1 

    2. Hit save. 

     

    You can also use  :visited  selector and modify colors 

    :visited {  css declarations;}

     

    ------------
    In Design Studio

    1. Pres sync configuration and preview the website. And press "Ctrl+F5" 

     

    Output:

     

    ragavanrajan_0-1660254586066.png

    On Hover: 

     

    ragavanrajan_1-1660254609971.png

     

    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.

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

Michael Gernaey – Community Spotlight

We are honored to recognize Michael Gernaey as our June 2025 Community…

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard >