If you wish to offer users, more clear information about the menu item they are visiting, then try this code: (it does not work with sub-menu items…yet)
Add this code to the custom code section /header of your softr app:
<script>
// Add special class to active nav menu link for better UX
window.addEventListener('block-loaded-YOUR-BLOCK-ID', function() {
highlightSelectedLink();
});
window.addEventListener('block-loaded-YOUR-BLOCK-ID2', function() {
highlightSelectedLink();
});
function highlightSelectedLink() {
const headerElements = document.querySelectorAll('header');
const config = { childList: true, subtree: true };
const callback = (mutationList, observer) => {
document.querySelectorAll('header a').forEach((el)=>
{
let href = el.getAttribute('href');
if(href && window.location.pathname.startsWith(href))
{
const span = el.querySelector('span');
if (span) {
for (let i = span.classList.length - 1; i >= 0; i--) {
const className = span.classList[i];
if (className.startsWith('sw-text-color-')) {
span.classList.remove(className);
}
}
span.classList.add("active-link");
}
}
});
};
const observer = new MutationObserver(callback);
headerElements.forEach((he) => {
observer.observe(he, config);
});
}
</script>
<style>
.active-link {
position: relative;
color: #f0f3d5; /* text color */
text-decoration: none;
padding: 8px 8px; /* padding of the box*/
}
/* style for the active-link box */
.active-link::before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: calc(100% + 10px);
height: calc(100% + 10px);
background-color: #878874; /* Main bg color */
opacity: 0.9; /* control opacity */
z-index: -1;
}
</style>