Create custom menu for membership area using CSS

Create custom menu for membership area using CSS

October 01, 20231 min read
Custom HTML/CSS/JAVASCRIPT

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


I am the CEO and Founder of My Vision Agency, a program where business owners can learn to scale their Vision with A.I.

Bridget Bartlett

I am the CEO and Founder of My Vision Agency, a program where business owners can learn to scale their Vision with A.I.

Back to Blog

Other Resources

Managed by Vision Marketing and Design LLC