Burger sub-menu

Hey jkos,

Could you share a screenshot highlighting what you would like to achieve please?

Best regards,
Rikard

Hi,
Since you want different styles for each menu item even if they are in the same zones as other items

“Land Speak of the John Muir Trail” in the Green zone may need slightly different styling than “Giants in the Gulch” which is also in the Green zone. Also, “Land Speak of the JMT – Statement” in the Orange zone could use slightly different styling than any of the other lines in the Orange zone.

your best approach will be to add custom classes to each menu item to target them with specific css.
Go to your menu screen and click the drop down “screen options” and check the box “CSS classes”

then you will see this box in the menu items

For example, adding the custom class “green” and this css to your Quick CSS:

#av-burger-menu-ul .green a {
	color: green !important;
}

will make your burger menu item green.
You can add multiple custom classes, for example if you want some items bold, you can also add the class “bold”:

and this css:

#av-burger-menu-ul .bold a {
	font-weight: bolder !important;
}

then this item will be green and bold.

Best regards,
Mike

Hi,
Unfortunately, I found that the mega menu column titles do not add the menu-item classes or the custom classes like the regular menu items


After much research, I found no way to correct this, but I was able to add a unique custom class to each mega menu column title in your burger menu with this javascript:

document.addEventListener('DOMContentLoaded', function () {
  const burger = document.querySelector('.av-burger-menu-main');
  let columnClassAdded = false;

  if (burger) {
    burger.addEventListener('click', function () {
     
      setTimeout(() => {
        if (columnClassAdded) return;

        const columnTitles = document.querySelectorAll('#av-burger-menu-ul li.av-width-submenu');

        columnTitles.forEach((el, index) => {
          el.classList.add('menu-column-title-' + (index + 1));
        });

        columnClassAdded = true;
      }, 100);
    });
  }
});

I added this to your WP Code plugin as a javascript snippet, it adds:
menu-column-title-1 with the number changing for each title, since you currently have six of them it goes to menu-column-title-6
with menu-column-title-1 = Collections and menu-column-title-6 = Being Seen.
The css to make Erosion Stories of Paria Canyon blue I added this:

#av-burger-menu-ul .menu-column-title-2 > a {
	color: blue !important;
}

So using this structure you can style the mega menu column titles in the burger menu, and for the other menu items use the custom classes as above, note that you will need to add a greater-than symbol in your css, like this:

#av-burger-menu-ul .gal > a {
color: blue !important;
}

so the siblings also don’t change.
Give this a try and let us know if you find any other issues.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike