Highlighting and greying navigation options

Hello,

Can anyone advise on how to make my navigation back similar to this website - https://www.empowergalway.com/what-we-do

I want the highlighted tab to remain clear while the others grey out.

Thanks

Hi @plloyd88, that is super easy, please add the following code to your website and also see attached video recording for reference:

1. Navigate to Pages > Website Tools > Custom CSS.
2. Paste the code into the CSS editor.
3. Hit Save and you’re done

/* Header Navigation - Set initial opacity and transition */
.header-nav a {
    transition: opacity 0.4s ease; /* Smooth transition on opacity change */
    opacity: 1 !important; /* Ensure links are fully visible initially */
}

/* When hovering over the header nav container, dim all links */
.header-nav:hover a {
    opacity: 0.35 !important; /* Dims the opacity of links */
}

/* When hovering over an individual link, restore full opacity */
.header-nav a:hover {
    opacity: 1 !important; /* Links will return to full opacity */
}

Add this code into pages > web tools > Custom Css :

/* General Navigation Styling */
.header-nav a {
    color: #b0b0b0; /* Default grey color for inactive links */
    opacity: 0.7;
    transition: color 0.3s ease, opacity 0.3s ease; /* Smooth transition for hover effects */
}

/* Highlight the Active Tab */
.header-nav a.active,
.header-nav a:hover {
    color: #000000; /* Clear/black color for the active link */
    opacity: 1; /* Fully visible */
}

/* Optional: Highlight the Hovered Tab */
.header-nav a:hover {
    color: #000000; /* Clear/black color on hover */
}