Open-Canvas menu as breadcrumbs

Ok, I deleted that from Elements. And frankly, I did not need the ActiveCampaign element either. Currently, I have no Elements.

Good, how do I now get the Off-Canvas Menu to display where a user is on the site? Are we back to me placing this coding somewhere on the backend?

add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script( 'jquery' );
} );

add_action( 'wp_head', function() {
?>
<script>
jQuery( document ).ready( function($) {
$( '.current-menu-ancestor' ).addClass( 'sfHover' ).find( '.sub-menu' ).addClass( 'toggled-on' );
} );
</script>
<?php
}, 999 );

Can you also remove that code ie the one provided in this link

Hi David,

Yes, I just made sure that I removed the hooks, and I checked CSS, and Snippets. That code is nowhere to be found. What's are next move?

John

Could i get a member login so i don't have to disable the members login overlay ?

Hi David,

Gladly. User login or admin login?

John

May as well go with admin just in case

Admin. Good.
Please send me an email, David.

John

Below the reply field there is the Private Information field where you can share a URL/temporary admin name and password.

See below in the Private Information field, David.

John

OK ... think i got it.
Below is the Javascript - which i have already added to an Appearance > Elements --> Hook Element titled: Off Canvas Crumb Crawler
You can just edit the Element and publish it to see it in action.

<script>
var getParents = function ( elem, selector ) {

	// Setup parents array
	var parents = [];

	// Get matching parent elements
	for ( ; elem && elem !== document; elem = elem.parentNode ) {

		// Add matching parents to array
		if ( selector ) {
			if ( elem.matches( selector ) ) {
				parents.push( elem );
			}
		} else {
			parents.push( elem );
		}

	}

	return parents;

};

function dbCrawlMenu() {
    var elem = document.querySelector('.current-menu-item');
    var parentLi = getParents(elem, '.current-menu-ancestor');
    var parentUL = getParents(elem, '.sub-menu');
    
    for ( var m = 0; m < parentLi.length; m++ ) {
        parentLi[m].classList.add('sfHover');
    }
    for ( var n = 0; n < parentUL.length; n++ ) {
        parentUL[n].classList.add('toggled-on');
    }
}

const elemHtml = document.querySelector('html')
const mutateOptions = {
  attributes: true
}

function callback(mutationList, observer) {
  mutationList.forEach(function(mutation) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      // handle class change
      if (mutation.target.className == 'slide-opened') {
          setTimeout(dbCrawlMenu, 250);
      }
    }
  })
}

const observer = new MutationObserver(callback)
observer.observe(elemHtml, mutateOptions)
</script>

For rightful reference the getParents function was repurposed from this post article

I just went in to the backend, David. Saw the hook, then published it. Beautiful. You're a genius !

However . . . I need more of that genius. And in two ways:

First: Is it possible for the user to immediately recognize which Country/Topic they are in? You have it set up currently so that the country, then the list of topics appear. If the user is in i.e. Germany_Communication, is it possible that the menu displays Germany, the list of topics, and the topic, i.e. Communication, is in some way highlighted?

Second: Can you do the same set-up for Contrasts, ie. Germany-USA ... Communication ... Small Talk ?

Thanks !

John

P.S. I have never experienced service like this before. Apple's Support is also first-class. You folks, however, are off the charts.

Thats awesome - it was a nice challenge, something i have been meaning to get my head around for a while.

In Customizer > Colors > Off Canvas, you have the Current Menu Item colors - you can set the color/background to highlight it.

Or if you need something particular let us know and ill provide some CSS.

Frankly, David, I've never felt comfortable with the look of my Off-Canvas Menu. It's black and white, too stark, too stringent, ugly ... and in contrast to what I think is a good-looking frontend.

You have admin access. I'm confident you can beautify the Off-Canvas Menu in no more than a handful of keystrokes. Surely this is not your job, but would you like to take a cut at it?

John

Unfortunately that is out of our scope - the Javascript for opening the breadcrumbs kinda saddled the line there, as i think it's a feature we should add to the theme.

If you have an example of a site that you like the look of its menu then i am happy to advise.

Ok. Got it. So where are we?

1. Getting the off-canvas menu to open itself up depending on where the user is: you're working on that or is it not yet possible within GP?

2. I'll look for menus which I think would work on my site, then send you the links to those sites.

Right?

John