[Resolved] Disable links in the mega menu depending on the page I am

[Boris]

Hello,

I need your help

Imagine you are on a website (I will give you the url). There is a mega menu on this website representing categories. (Ex: mywebsite/health, mywebsite/sport, mywebsite/diy)

Now, there is an article in the diy category and his url is: mywebsite/diy/how-to-craft

My problem is that if I am on this page mywebsite/diy/how-to-craft, i would want the link (a href balise) of mywebsite/health and mywebsite/sport be disabled in the mega menu ! (i mean that there is no mare a href). But I want the link mywebsite/diy be enabled in the mega menu

I would want the same thing if we are on the page: mywebsite/health/how-to-eat. So the link in the mega menu: mywebsite/sport and mywebsite/diy are disabled.

How can I do it with generatepress

Thanks in advance

Best regards, I love Generate Press by the way !

[Boris]

This is the url

[Leo]

Hi Boris,

Sorry but I don’t quite understand the question but is this what you are looking for?
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link

Keep in mind that he menu system is WordPress core feature so the theme doesn’t have any control over the structure and how it works etc.

Here is a documentation from WP:
https://codex.wordpress.org/WordPress_Menu_User_Guide

Let me know if I’m missing something here.

[Boris]

Hello leo,

Unfortunately no it’s not what i am looking for.

In fact i would want to disable some links depending on the article the user is reading (dynamic obfuscation) in the mega menu (links of categories).

I can remove the links of categories for all pages on the website. But the problem is that it’s depends of the article which belong to the category.

Best regards

[Ying]

The menu is handled by WP, GP doesn’t have control over adding/removing the links.

However you can give CSS a try, it simply disables pointer event of menu items that are not the current page or parent of the current page:

.main-navigation :not(li[class*=current-menu-])>a {
    pointer-events: none;
}

[Boris]

Thanks ying I will test and see.

If it doesn’t work i will code some javascript

Thanks you

[Ying]

You are welcome Boris 🙂

[Boris]

Hello,

Let me continue the subject. I finally managed to code some javascript (hook name: “dynamic obfuscation”) to obfuscate the links but the original css is lost. Please tell me how I can do this ?

Thanks in advance !

[Boris]

The class is “.qcd”

Best regards

[David]

Hi there,

the obfuscation is replacing the <a> in the menus HTML with a span tag. Which will break all the styles.
Which means you would have to rewrite all the CSS that relies on that HTML.

Does the obfuscation have to swap the HTML ?

[Boris]

Hello david,

Yes in fact,

i tried since two hours to have the css back in his original style but i didn’t success

yes the obfuscation have to swap the html to have the style like brfore

how can i get the css back

Thanks in advance

[Ying]

yes the obfuscation have to swap the html

Unfortunately, there’s no way to get the CSS back if this is required.

You will need to write your own CSS to style the menu items.

[Boris]

Ok thanks,

I would want to add space between the elements of the menu, how can i do it please ? I use .menu.sf-menu but it’s not working

Best regards

[Ying]

Do you mean adding space between the menun items? If so, try this CSS:

.main-navigation .main-nav ul.menu {
    column-gap: 20px;
}

[Boris]

Hello ying, thanks it’s worked !

Last thing please, the last thing.

I have tried to target “.main-navigation .main-nav ul.menu” using querySelectorAll in javascript but it’s not working.

Could you help me please ?

best regards

[Author]

Posts