[Resolved] Open-Canvas menu as breadcrumbs

[John]

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 );

[David]

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

[John]

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

[David]

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

[John]

Hi David,

Gladly. User login or admin login?

John

[David]

May as well go with admin just in case

[John]

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

John

[David]

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

[John]

See below in the Private Information field, David.

John

[David]

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

[John]

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.

[David]

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.

[John]

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

[David]

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.

[John]

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

[Author]

Posts