Kookaburra - highlight the current page menu item

volvoxturbo · March 6, 2024, 11:15pm

Hi all,

how to highlight the current page menu item and other links in Kookaburra???

I tried the following script in phplugins:

<script>
$("ul.menu a[href='" + window.location.pathname + "']")
.parentsUntil('.menu', 'li')
.addClass("current_page_item")
;
</script>

with css:

li.menu-item.current_page_item a {
    color: red;
}

but that doesnt seem to work with Kookaburra.

Thx in advance.
Best regards,
Oliver

Matthew · March 8, 2024, 6:33am

This more or less does it.

		function scripts() {
			echo <<<HTML
			<script>
				const currentNavLink = document.querySelector('.main-navigation a[href="' + window.location.pathname + '"]');
				currentNavLink.style.backgroundColor = "red";
			</script>
HTML;
// do not indent line above
			return false;
		} // END /**/

Keep in mind that Kookaburra doesn’t have jQuery, so your code above wouldn’t work at all. On top of that, the markup is different. So, to write JS for Kookaburra, you would need to:

use vanilla JS, not jQuery
inspect the page to get the appropriate elements, class names, etc.

In short, you cannot copy-and-paste Pangolin code into Kookaburra.

volvoxturbo · March 8, 2024, 11:05am

Hi Matt,

brilliant! Thank you!
I tried to address .main h2 in addition to .main-navigation but doesnt work.
I also tried to duplicate the script - one for the .main navigation the other one for .main h2 doesnt work either.

Is there a way to address .main h2 and .main navigation at the same time?

Best regards,
Oliver

rod_barbee · March 8, 2024, 1:10pm

Do you just want to have the heading of all pages to be a different color?
If so, custom css can do that

volvoxturbo · March 8, 2024, 1:31pm

Hi Rod,

the script works very well.

But I have a second navigation:

<h2 style="text-align: center; "><a href="/barcelona-photo-tours" title="Barcelona Photo Tours">Barcelona</a> - <a href="/costa-brava-girona-photo-tours/" title="Costa Brava - Girona Photo Tour">Costa Brava - Girona</a> - <a href="/tarragona-photo-tours" title="Tarragona Photo Tours">Tarragona</a> - <a href="/valencia-photo-tours" title="Valencia Photo Tours">Valencia</a></h2>

Here I would like the active link to have a different color.

In my search I have not yet found a solution with css.
I changed Matts script to:

<script>
const currentNavLink = document.querySelector('.main h2 a[href="' + window.location.pathname + '"]');
currentNavLink.style.color = "rgb(255, 128, 0)";
</script>

Do you have a hint using css for this?

Best regards,
Oliver

rod_barbee · March 8, 2024, 2:04pm

I didn’t understand what you were trying to do. I thought you just wanted to highlight the page’s heading.
I think you need a Javascript solution, something I really don’t know about.

volvoxturbo · March 8, 2024, 2:27pm

to have the active link e.g. “Barcelona” orange I modified the script:

<script>
const currentNavLink = document.querySelector('.main h2 a[href="' + window.location.pathname + '"]');
currentNavLink.style.color = "rgb(255, 128, 0)";
</script>

But I also like to have the active menu item e.g. PHOTO TOURS orange as well.
This is possible with the original script:

<script>
const currentNavLink = document.querySelector('.main-navigation a[href="' + window.location.pathname + '"]');
currentNavLink.style.backgroundColor = "red";
</script>

If I use the original script for the menu, how can I css the following

<h2 style="text-align: center; "><a href="/barcelona-photo-tours" title="Barcelona Photo Tours">Barcelona</a> - <a href="/costa-brava-girona-photo-tours/" title="Costa Brava - Girona Photo Tour">Costa Brava - Girona</a> - <a href="/tarragona-photo-tours" title="Tarragona Photo Tours">Tarragona</a> - <a href="/valencia-photo-tours" title="Valencia Photo Tours">Valencia</a></h2>

so that e.g. “Barcelona” or “Tarragona” is orange when active.

rod_barbee · March 8, 2024, 3:14pm

Is this code that you’re manually putting on every tour page? If so, you could simply use inline styling.
If you’re adding it via an album template or phplugins then my guess is that you would need to use Javascript to identify the current page’s link in that group and add the styling like Matt showed with the nav items.
You’ll probably need to put your code inside a div with an ID and target the current page link within that div like Matt targets links inside .main-navigation a

Daniel · March 8, 2024, 4:18pm

Your photo tours menu points to the Barcelona page. Let’s say you’re Valencia page, the selector query would not match since the Valencia page link is different to the Barcelona link.

On my site, I use php to match pages and then add a class accordingly. Then it’s just some css to get the effect. But this can be done with plain javascript too. This should work, hopefully…

<script>
if (url.pathname.match(/photo-tours/)){
   // highlight menu
   document.querySelector('.main-navigation a[href="/barcelona-photo-tours"]').style.backgroundColor = "red";
}
</script>

Matthew · March 9, 2024, 12:58am

You can run a second instance of the code that I gave you above, one for each location you want to change.

Or, if they have similar attributes you can latch onto, you could user querySelectorAll instead of querySelector to operate on an array of results.

volvoxturbo · March 9, 2024, 10:49am

Hi Daniel,

thanks for your support!
I will try what Matt suggested using two instances.

Best regards,
Oliver

volvoxturbo · March 9, 2024, 10:52am

Hi Matt,

This is what I’m doing:

<script>
const currentNavLink = document.querySelector('.main h2 a[href="' + window.location.pathname + '"]');
currentNavLink.style.color = "rgb(255, 128, 0)";
</script>
				
<script>
const currentNavLink = document.querySelector('.main-navigation a[href="' + window.location.pathname + '"]');
currentNavLink.style.backgroundColor = "rgb(255, 128, 0)";
</script>

but only the upper one has effect no matter in which order

What am I doing wrong?

Best regards,
Oliver

Daniel · March 9, 2024, 5:56pm

In the javascript console you see the issue:
Uncaught SyntaxError: Identifier 'currentNavLink' has already been declared (at barcelona-photo-tours:1901:13)
You have to use a different name.

My understanding is that this will work for the page https://oliver-blum.com/barcelona-photo-tours, but not for the other photo tour pages. My code should work for all.

volvoxturbo · March 9, 2024, 6:10pm

But it should not only work for:
(url.pathname.match(/photo-tours/)){
but also for workshops

Matthew · March 9, 2024, 9:51pm

You cannot reassign a variable declared using const. These are immutable.

You can do any of the following:

use let instead of const, allowing the variable to be reassigned
use a different variable name for the second const declaration
wrap your code in closures, for example:

<script>
  (() => {
    const currentNavLink = document.querySelector('.main h2 a[href="' + window.location.pathname + '"]');
    currentNavLink.style.color = "rgb(255, 128, 0)";
  })();

  (() => {
    const currentNavLink = document.querySelector('.main-navigation a[href="' + window.location.pathname + '"]');
    currentNavLink.style.backgroundColor = "rgb(255, 128, 0)";
  })();
</script>

volvoxturbo · March 10, 2024, 9:41am

Dear Matt,

you’ll excuse me, but Javascript is a closed book for me.
Unfortunately, your script only works partially. What do I have to change so that every active link in the main navigation is highlighted in color and the active main h2 links are addressed separately?

Best regards,
Oliver

Daniel · March 10, 2024, 5:25pm

But it should not only work for:
(url.pathname.match(/photo-tours/)){
but also for workshops

<script>
if (url.pathname.match(/photo-tours/)){
   // highlight menu
   document.querySelector('.main-navigation a[href="/barcelona-photo-tours"]').style.backgroundColor = "red";
}
if (url.pathname.match(/workshops/)){
   // highlight menu
   document.querySelector('.main-navigation a[href="/barcelona-workshops"]').style.backgroundColor = "red";
}
</script>

volvoxturbo · March 10, 2024, 8:42pm

Dear Daniel,
thank you very much for your effort, but nothing happens with this script. Maybe it only works with pangolin? Or do I need a special css?

Best regards,
Oliver

Daniel · March 11, 2024, 12:58am

Sorry, url should be location. Please try with this.

<script>
if (location.pathname.match(/photo-tours/)){
   // highlight menu Phototours
   document.querySelector('.main-navigation a[href="/barcelona-photo-tours"]').style.backgroundColor = "red";
}
if (location.pathname.match(/workshops/)){
   // highlight menu Workshops
   document.querySelector('.main-navigation a[href="/barcelona-workshops"]').style.backgroundColor = "red";
}
</script>

BTW, your workshop pages are not showing anything…

volvoxturbo · March 11, 2024, 10:37am

Hi Daniel,

thank you! That works well in combination with:

<script>				
(() => {
const currentNavLink2 = document.querySelector('.main h2 a[href="' + window.location.pathname + '"]');
currentNavLink2.style.color = "rgb(255, 128, 0)";
})();
</script>

But it would be perfect, to find a solution, that all elements in the NavMenu (Home, About, FAQ, Contact) will also be highlighted with a background color. Therefore I tried to add:

if (location.pathname.match(/faq/)){
   // highlight menu Faq
   document.querySelector('.main-navigation a[href="/faq"]').style.backgroundColor = "rgb(255, 128, 0)";
}

to your script but without any effect

Do you have any other idea?

Best regards,
Oliver

BTW, the workshops are roughly described in german lang for now, will work on it today