there.
I'm almost finishing a website I'm developing from scratch in wordpress, without any premade plugins or theme. But I'm facing a silly issue, I guess, that I don't understand what is going on.
There is this kind of menu item that I need to hightlight. It works fine everywhere but in pagination. I'm not using a wordpress menu, so I can't use prebuilt classes like "i.current_page_item" and "li.current_page_item a"
That's why I'm using this following JS:
const activePage = window.location.href;
const navLinks = document.querySelectorAll("nav .custom-menu-class ul li a");
navLinks.forEach((mylink) => {
if (mylink.href.includes(`${activePage}`)) {
mylink.classList.add("active-menu");
}
});
It works in "http://localhost/mysite/pizza", but it doesnt work in "http://localhost/mysite/pizza/page/2"
Here it goes my menu code in php:
<nav class="menu">
<div class="custom-menu-class">
<ul>
<a href="<?php echo get_page_link(724);?>"><li><?php echo get_the_title(724);?></li></a>
<a href="<?php echo get_page_link(726);?>"><li><?php echo get_the_title(726);?></li></a>
<a href="<?php echo get_page_link(724);?>"><li><?php echo get_the_title(728);?></li></a>
</ul>
</div>
Does anybody know what am I doing wrong? Thanks a lot for your attention.
When I examine your code, the first problem I see is in here:
const navLinks = document.querySelectorAll("nav .custom-menu-class ul li a");
Since you have defined the hierarchy as
nav > .custom-menu-class > ul > a > li
you cant get the related menu items in your Javascript with
"nav .custom-menu-class ul li a"
to get rid of this problem you can simply remove the "li" from it and write it down like:
"nav .custom-menu-class ul a"
Other than that, to see what is going on while matching your page urls with "window.location.href", you can simply output the variables and compare them. To do this, once you create your activePage variable print it to your console with
console.log(activePage);
and check weather it matches with your page links.