Widget:NewsNav

 <a href="/THE_News" style="display:inline-block; padding:0.5em 1em; text-decoration:none; color:#333; font-weight:500; white-space:nowrap; border-bottom:2px solid transparent;">THE News</a>
 <a href="/THE_News/THE_Opinions" style="display:inline-block; padding:0.5em 1em; text-decoration:none; color:#333; font-weight:500; white-space:nowrap; border-bottom:2px solid transparent;">THE Opinions</a>
 <a href="/THE_Blog" style="display:inline-block; padding:0.5em 1em; text-decoration:none; color:#333; font-weight:500; white-space:nowrap; border-bottom:2px solid transparent;">THE Blog</a>

<script> const menu = document.querySelector('div[style*="overflow-x:auto"]'); const links = menu.querySelectorAll('a'); const currentPath = window.location.pathname;

links.forEach(link => {

 if(link.getAttribute('href') === currentPath) {
   link.style.borderBottom = '2px solid #0078d4';
   link.style.color = '#0078d4';
   link.scrollIntoView({ behavior: 'smooth', inline: 'center' });
 }

});

links.forEach(link => {

 link.addEventListener('mouseover', () => {
   link.style.borderBottom = '2px solid #0078d4';
   link.style.color = '#0078d4';
 });
 link.addEventListener('mouseout', () => {
   if(link.getAttribute('href') !== currentPath) {
     link.style.borderBottom = '2px solid transparent';
     link.style.color = '#333';
   }
 });

}); </script>