Create custom menu for membership area using CSS
Only edit the Bold text for Menu Item and URL
Paste into Memberships> Settings> Custom JS
--------------------------------------------------------
/** @format */
var customNavMenu = [
{
menuName: 'Menu 1',
menuLink: 'URL;
},
{
menuName: 'Menu 2',
menuLink: 'URL;
},
{
menuName: 'Menu 3',
menuLink: 'URL;
},
];
// Don't Touch below Code
var body = document.querySelector('body');
body.addEventListener(
'DOMNodeInserted',
function (event) {
//Select Nav Menu
var NevMenuContainer = document.querySelector('#navigation-header > nav > div.hidden.md\\:flex.items-center.md\\:ml-10.md\\:pr-4');
if (event.target?.id 'product-list' || event.target?.classList?.contains('justify-center') || event.target.type 'text/javascript') {
//Code Test
console.log('Fahim Code Working Fine');
var testCustomMenu = document.querySelector('.custom__menu');
if (!testCustomMenu) {
customNavMenu.forEach((menu) => {
var newMenuLink = document.createElement('a');
newMenuLink.classList.add(
'font-medium',
'text-gray-500',
'hover:text-gray-900',
'focus:outline-none',
'focus:text-gray-900',
'transition',
'duration-150',
'ease-in-out',
'custom__menu'
);
newMenuLink.textContent = menu.menuName;
newMenuLink.style.marginLeft = '10px';
newMenuLink.style.marginRight = '10px';
newMenuLink.href = menu.menuLink;
NevMenuContainer?.prepend(newMenuLink);
});
}
false;
}
},
false
);
--------------------------------------------------------
🙋HAVE QUESTIONS?
To access the High Level knowledgebase: CLICK HERE
Join us for open office hours (Free to everyone): Join Us
Join us for our weekly QA session (Members Only): Join Us
Book a private consultation (Build It With Me): Book Here