Bricks: Podtržení položek v menu na aktuální stránce

Zrovna jsem u jednoho klienta řešil podtržení položek v menu. Pro klasický hover (najetí myší na položku v menu) přidávám toto CSS. Nepoužívám klasické <u>, jelikož to nevypadá designově úplně nejlépe. Aby vám kód fungoval, tak je potřeba na section, kde je menu, přidat i class .ap-header. Po přidání této class se CSS aplikují jen na menu a ne po celém webu.

/* PODTRŽENÍ POLOŽEK V MENU DESKTOP */
.ap-header .brxe-text-link {
  position: relative;
  text-decoration: none;
  
}
.ap-header .brxe-text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* Odsazení podtržení */
  width: 100%;
  height: 2px; /* Šířka podtržení */
  background: var(--main-color); /* Barva podtržení */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}
.ap-header .brxe-text-link:hover::after {
  transform: scaleX(1);
}

Pokud podtržení při hover funguje, tak zde je i PHP kód na podtržení položky menu zrovna tam, kde se nacházíte. Pakliže se tedy zrovna nacházíte v kontaktu, tak pod kontaktem bude podtržení. Zde ještě upozorním, že je v kódu je vyloučena hlavní stránka. ID mojí hlavní stránky bylo „10“, tak si tam napište svojí vlastní hodnotu. Dané ID naleznete v adminu v detailu dané stránky – nachází se v URL.

// PODTRŽENÍ STRÁNKY, KDE SE ZROVNA NACHÁZÍM

// POZNÁMKY
// Je potřeba vyloučit hlavní stránku pomocí ID

// Přidá třídu 'active' k odpovídajícím odkazům
function add_active_class_to_links() {
    // Získáme ID aktuální stránky
    $current_page_id = get_queried_object_id();

    // Zde změňte ID na své
    if ($current_page_id == 10) {
        return;
    }

    // Získá aktuální URL a zajistí správný formát
    $current_url = trailingslashit($_SERVER['REQUEST_URI']); 
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            document.querySelectorAll(".brxe-text-link").forEach(link => {
                // Pokud odkaz obsahuje aktuální cestu, přidá třídu 'active'
                if (link.href.includes(window.location.pathname)) {
                    link.classList.add("active");
                }
            });
        });
    </script>
    <style>
        .ap-header .brxe-text-link.active::after {
            transform: scaleX(1);
        }
    </style>
    <?php
}
add_action('wp_footer', 'add_active_class_to_links'); // Přidá JS kód do patičky stránky