[SOLVED] Disabling Parent category links in top menu

[bobbything]

Hello all - 

 

I've searched and searched and cannot seem to find an answer to this very frustrating issue I'm having...

 

Basically, I have my top menu navigation set up as a mix of CMS links and Category links.  What I'm trying to do is disable the Parent category links only for for those categories that have drop-down sub-menu categories.

 

If anyone has any idea on how to hack this, I'd appreciate it.  I have attached a screenshot for reference.

 

I'm using 1.5.4 

Edited September 24, 2013 by bobbything (see edit history)

[vekia]

by default it isn't possible to do it easily.

it's necessary to modify top horizontal menu .php scripts

 

btw.  you said:

 

but this is available by default so you need to remove link from first element only

[bobbything]

Okay, so I came up with a solution for anyone who has been looking for this.  It doesn't require hardly any reworking/removing code.

 

Open this file:

 

yourshop/modules/blocktopmenu/js/superfish-modified.js

 

Simply place this line of code at the bottom of the "superfish-modified.js" file and violá!  All parent links are disabled.

 

$(document).ready(function(){
	$('.sf-with-ul').bind('click', false);
});

Whenever drop-down categories are created in the menu, they're given a class of "sf-with-ul".  All this is doing is using jquery to bind a false return on click for anything on that page with class "sf-with-ul".  It will not affect any menu links without a drop-down menu.

 

Hope this helps.  I've noticed this has been an issue since 2009 from searching these forums.  I will mark this thread [sOLVED].

[vekia]

hello thank you for your solution.

but if you check page source you will see that anhor is still there

[bobbything]

Hi vekia -

 

If you're referring to the link, yes, the link is still there, but it isn't active.  I am assuming you're using the "blocktopmenu" that comes standard with Prestashop.  So, if that's accurate, this piece of jquery should disable the link from loading onclick; even though it still looks like it's active.

 

I've tested it on my site and it works great.

 

I'm happy to help any way I can.  

[sinoland]

Hi,

 

How about adding the CSS property "pointing-events:none" to superfish-modified.css (line 101)

 

.sf-menu a.sf-with-ul { ... }

 

It works for me. Thank you.

 

Sinoland

 

 

Thank you Bobby. It should be pointer-events:none. 

Edited September 4, 2014 by sinoland (see edit history)

[julian walker]

I have tried this without success

I just placed this line of code at the bottom of the "superfish-modified.js"

 

$(document).ready(function(){

    $('.sf-with-ul').bind('click', false);
});

 

I believe it is a solution and really hope it works but I am a javascript numptie

Can you enlighten more bobby thing

 

I also tried your css sinoland but again no success

 

Cheers

Julian

Edited October 6, 2013 by julian walker (see edit history)

[bobbything]

Hi Julian - 

 

Can you send me a link to your site and let me know which menu item you're trying to disable?  There shouldn't be any reason it doesn't work unless the class of the item has a different name.

 

However, all this said, sinoland has come up with a very easy solution (and better, in my opinion) than mine.  In addition to it disabling the parent link, it also hides the URL.

 

However, the CSS is "pointer-events:none" rather than "pointing-events:none".  That's probably why it didn't work for you Julian.  Give that a try and see if it works.

 

Thanks sinoland!  Nice, easy solution.

[julian walker]

Hi Bobby

Thanks for replying I tried the 'pointer-events:none' still without success.

My site is http://www.jonnyjavelin.com.gridhosted.co.uk/ & the parent links to disable are "Cards by Range" & "Cards by Category"

 

Cheers

Julian

[bobbything]

Hey Julian - 

 

It appears that you're using some kind of template other than the default theme that was provided by Prestashop; which means your css files, js files, etc. are going to be named something different.  For instance, your theme is not using the "superfish-modified.js" file nor the "superfish-modified.css" file. So, the solutions we came up with need to be placed somewhere else.

 

I looked on your site and tried to find the css and js files that are being associated with your theme, however, they're not labeled so that it's easy to determine.   For instance, they all have a string of numbers in front of them (ie: "2349q730495q87qer0t.css").  So, it's not easy to identify which css file to modify.

 

That said, I believe your menu js files is located here "http://www.jonnyjavelin.com.gridhosted.co.uk/themes/UniqueShop/js/modules/blocktopmenu/js/respnav.js"  and the class for each menu item is "dc-mega".  So, open the js file from the above path and insert this code at the bottom of the page, then upload the js file.  It should do the trick.

 

$(document).ready(function(){

    $('.dc-mega').bind('click', false);
});

[julian walker]

Hi Bobbything

Your right it works! Thank you very much, we are soon to go live and not being able to disable these links has been very frustrating

Thanks again for putting the time in

 

Cheers

Julian

[bobbything]

No problem.  Happy to help out.  I know how frustrating it can be to get Prestashop to do what you want it to do.  Good luck to you.

 

And maybe sinoland can look and see which css file you need to edit in order to use his solution.  I tried it in several areas and it wouldn't disable just the parent link; it disabled every link.  It may be that the way in which the css is written that that solution will not work.

 

Either way, I'm glad it works for you now.

[CUBE-IN]

If you have 3 (or more) levels menu and want to disable only the main level, you need to change the selector like that:

 

$(document).ready(function(){

  $('ul#topmenu > li > a.sf-with-ul').bind('click', false);

});

[kilo]

Hi,

 

I need to find a solution to the same problem. Is there a way to find out which .js or .css files my theme’s menu uses?

 

I think this is the css file my menu uses

 

http://www.rogeroates.com/shop/themes/multishop/css/modules/blockmultitopmenu/css/blockmultitopmenu.css

 

Can anyone tell me what I need to insert?

 

Thanks

Josh

[Macota Lorin]

Hello,

 

I am trying to do the same thing, but with no success!

I tried the two solutions above but with no success.

 

Can anyone please help?

 

Prestashop 1.5.5.0

[vekia]

what theme you use?  default one? 

if so, js snippet will not work for you

 

try to use something like

$(document).ready(function(){
  $('ul.sf-menu > li > a').bind('click', false);
});

[Macota Lorin]

 

what theme you use?  default one? 

if so, js snippet will not work for you

 

try to use something like

$(document).ready(function(){
  $('ul.sf-menu > li > a').bind('click', false);
});

 

Hello,

 

My theme name is "theme701".

I have inserted the code you give me but with no result. I looked at the html code generated in the browser and my link tag ( <a></a> ) has no class! I think that is why the code does not work for me. Any ideas?

 

Link to a test server: http://mobcasarusu.quanticlab.com/

 

Sadly I don't have permission to give access to it.

 

Thanks!

[vekia]

Hello,

 

My theme name is "theme701".

I have inserted the code you give me but with no result. I looked at the html code generated in the browser and my link tag ( <a></a> ) has no class! I think that is why the code does not work for me. Any ideas?

 

Link to a test server: http://mobcasarusu.quanticlab.com/

 

Sadly I don't have permission to give access to it.

 

Thanks!

 

okay so, your theme uses another menu with other class / id definition

it means that you have to use different code

 

use this one:

$(document).ready(function(){
  $('ul#menu-custom > li > a').bind('click', false);
})

[Macota Lorin]

 

okay so, your theme uses another menu with other class / id definition

it means that you have to use different code

 

use this one:

$(document).ready(function(){
  $('ul#menu-custom > li > a').bind('click', false);
})

 

I used that code but with no luck!

 

Any other ideas?

[homefoodfinder]

 

what theme you use?  default one? 

if so, js snippet will not work for you

 

try to use something like

$(document).ready(function(){
  $('ul.sf-menu > li > a').bind('click', false);
});

Hello Vekia, I tried pasting the code at the end of the js file (modules/blocktopmenu/js/superfish-modified). But the link is still active. I have prestashop 1.6 with the default theme. Please help!

[vekia]

Hello Vekia, I tried pasting the code at the end of the js file (modules/blocktopmenu/js/superfish-modified). But the link is still active. I have prestashop 1.6 with the default theme. Please help!

 

I used that code but with no luck!

 

Any other ideas?

 

 

Hello Vekia, I tried pasting the code at the end of the js file (modules/blocktopmenu/js/superfish-modified). But the link is still active. I have prestashop 1.6 with the default theme. Please help!

 

 

 

can you share url to your website, please?

[homefoodfinder]

can you share url to your website, please?

Sure. It is www.homefoodfinder.com

[ricky11]

Hi Sinoland

 

Using 1.609 default theme, i cant see find the line sf-menu a.sf-with-ul  in superfish-modified.css?

 

is it not in theme2.css?

 

Thanks.

[sinoland]

Hi Sinoland

 

Using 1.609 default theme, i cant see find the line sf-menu a.sf-with-ul  in superfish-modified.css?

 

is it not in theme2.css?

 

Thanks.

 

Hi Ricky,

 

Add

 

.sf-menu a.sf-with-ul {

  pointer-events:none; }

 

to

 

/public_html/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Hope this helps.

[ricky11]

Thanks, it works placed it in 101, but i could place it anywhere in the css , correct?

 

If you could break it down .sf-menu - this is the class for the menu?

 

a.sf-with-ul (sf-with.ul) is the title category class?  and .a refers to hyperlink?

 

Thanks.

 

OOPS: guess we are all using chrome... i tried it in IE10 as well as on ios7 seems the link for main category is still clickable.

 

i tried clear cache in BO and F5 , still same.

 

http://stackoverflow.com/questions/9385213/how-to-make-internet-explorer-emulate-pointer-eventsnone

Edited September 17, 2014 by ricky11 (see edit history)

[sinoland]

Hi Ricky,

 

You may check browser compatibility for pointer-events easily online. I guess you need to learn more about css (honestly I'm still learning it day by day). I would also recommend using Firebug (plug-in for Firefox) as a web development tool. 

 

Regards,

Sinoland

[frank_jarle]

works.

[Mochi09]

Hi Ricky,

 

Add

 

.sf-menu a.sf-with-ul {

  pointer-events:none; }

 

to

 

/public_html/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Hope this helps.

i tried using this, it works but, is it possible to disable specific menu and subcategories?

[Mochi09]

any clear solution for this?I tried everything posted, nothing works, im using PS 1.6.0.6

[sideways]

For some reason this appears not to work on small screens when the menu is adapted for mobile devices. Anyone have a working solution for those as well?

[moviezzz]

I am having the same problem. Adding the above code worked for desktop browsers but when mobile version kicks in on those smaller devices, parent categories become clickable again. Anyone has a solution for this?

 

 

For some reason this appears not to work on small screens when the menu is adapted for mobile devices. Anyone have a working solution for those as well?

[Stayhigh]

I am having the same problem. Adding the above code worked for desktop browsers but when mobile version kicks in on those smaller devices, parent categories become clickable again. Anyone has a solution for this?

 

 pointer-events:none;

 

you can paste this into almost link that you want to dissable it.  Try this.

 

  .sf-menu > li > a {

  pointer-events:none;

[Ambrakatambra]

Hello, i would like to disable only one cms category in tophorizonal menu and not all categories. How can i do this?

 

Attach image. Only active cms category want to disable.

 

Thanks!

 

Edited August 4, 2015 by Araksopoulos (see edit history)

[Mochi09]

Hello, i would like to disable only one cms category in tophorizonal menu and not all categories. How can i do this?

 

Attach image. Only active cms category want to disable.

 

Thanks!

 

Just go to module> Top Horizontal Menu and remove the category you want

[taniacr]

 

what theme you use?  default one? 

if so, js snippet will not work for you

 

try to use something like

$(document).ready(function(){
  $('ul.sf-menu > li > a').bind('click', false);
});

 

Hi,

 

Sorry for bringing up an old topic however I was wondering if someone could help me.

 

This js snippet works for me, but I wanted to disable the parent link ONLY when it has sub-categories. Not a js person as you can see.. lol It it possible?

 

Thanks

[srs_peg]

Hi on my site, I want to remove the sub-category (Introductory Certificate) under the category AAT but cant find a way to remove it. I am new to Prestashop. The address is https://store.passexamsguru.com

[INFOIT]

Hy everyone,

 

We have a web on www.top-zabava.com  and we use TM mega menu and on TOP menu we have KARNEVAL and then drop down meni with subcategory - PUST PO TEMAH....AND then another SUB-sategories...that we dont want to have it there.....

It is there some option that it seen only first sub-category and no more sub-cat...  ?

 

Thank you for all help,

 

Tadej

[Noeliapmm]

Add

 

.sf-menu a.sf-with-ul {

  pointer-events:none; }

 

to

 

/public_html/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

Hope this helps.

 

Hi.

 

It is perfect for me. If the category have subcategories (they exit under menu), the principal link is disabled.

 

Thank you very much, and sorry for my english.

 

Regards

[etuning]

This is working, but not 100% how I want it.

 

Can I disable the link on the button but not on the subcategories???

Edited September 20, 2017 by etuning (see edit history)

[milaonline]

If you want to make it work without css and js:

in ps 1.6.1.12

blocktopmenu.php

line 602

change

 

foreach ($categories as $key => $category) {
            if ($category['level_depth'] > 1) {
                $cat = new Category($category['id_category']);
                $link = Tools::HtmlEntitiesUTF8($cat->getLink());
            } else {
                $link = $this->context->link->getPageLink('#');
            }

to:

 

foreach ($categories as $key => $category) {
            if ($category['level_depth'] > 1) {
                $cat = new Category($category['id_category']);
                $link = Tools::HtmlEntitiesUTF8($cat->getLink());
            } else {
                $link = '#';
            }

Edited September 21, 2017 by milaonline (see edit history)

[etuning]

I've fixed it with:

 

.sf-menu > li:nth-child(1) > a.sf-with-ul {

 pointer-events:none;

    }

 

 

Thank you

Edited September 21, 2017 by etuning (see edit history)

[lunarmys]

Hello,

Anyone know how to do this in version 1.7.4.3

 

[JBW]

I did it in following way in 1.7.4.3:

Adjust line 10 in file themes\classic\modules\ps_mainmenu\ps_mainmenu.tpl to
    {if !$node.children|count} href="{$node.url}"{else} style="cursor: context-menu"{/if}" data-depth="{$depth}"

Hope this helps.

Edited October 19, 2018 by JBW (see edit history)

[gabiferbe]

hello, i need this in prestashop 1.7.5.1... help please 

[JBW]

9 hours ago, gabiferbe said:

hello, i need this in prestashop 1.7.5.1... help please 

The solution I posted above is still valid in 1.7.5.1 (with little adjustment):

Adjust line 10 in file themes\classic\modules\ps_mainmenu\ps_mainmenu.tpl to
    {if $node.children|count>0} href="{$node.url}"{else} style="cursor: context-menu"{/if}" data-depth="{$depth}" 

[gabiferbe]

10 hours ago, JBW said:

if $node.children|count>0}

i dont know which line i have to change to make it work... thanks for your help

 

 {if $nodes|count}
      
        <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
            {foreach from=$nodes item=node}
                <li class="classic-list {$node.type}{if $node.current} current {/if} {if $node.children|count} has-child {/if} level{$depth}" id="{$node.page_identifier}">
                    {assign var=_counter value=$_counter+1}
                    <a
                        class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                        href="{$node.url}" data-depth="{$depth}"
                        {if $node.open_in_new_window} target="_blank" {/if}
                        >
                        {if $node.children|count}                                                
                            {* Cannot use page identifier as we can have the same page several times *}
                            {assign var=_expand_id value=10|mt_rand:100000}
                            <span class="float-xs-right hidden-md-up">
                                <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                    <i class="material-icons add">&#xE313;</i>
                                    <i class="material-icons remove">&#xE316;</i>
                                </span>
                            </span>
                        {/if}
                        {$node.label}
                    </a>
                    {if $node.children|count}
                        <div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                            {menu nodes=$node.children depth=$node.depth parent=$node}
                            {if $node.image_urls|count > 0}
                                <div class="cat-bottom-block" data-count="{$node.children|count}">
                                    {foreach from=$node.image_urls item=image_url}
                                        <p>
                                            <img src="{$image_url}" alt="{$node.label}">
                                        </p>
                                    {/foreach}
                                </div>
                            {/if}

 

 

[JBW]

{if $nodes|count}
      
        <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
            {foreach from=$nodes item=node}
                <li class="classic-list {$node.type}{if $node.current} current {/if} {if $node.children|count} has-child {/if} level{$depth}" id="{$node.page_identifier}">
                    {assign var=_counter value=$_counter+1}
                    <a
                        class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                        {if $node.children|count>0} href="{$node.url}"{else} style="cursor: context-menu"{/if}" data-depth="{$depth}"
                        {if $node.open_in_new_window} target="_blank" {/if}
                        >
                        {if $node.children|count}                                                
                            {* Cannot use page identifier as we can have the same page several times *}
                            {assign var=_expand_id value=10|mt_rand:100000}
                            <span class="float-xs-right hidden-md-up">
                                <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                                    <i class="material-icons add"></i>
                                    <i class="material-icons remove"></i>
                                </span>
                            </span>
                        {/if}
                        {$node.label}
                    </a>
                    {if $node.children|count}
                        <div {if $depth === 0} class="classic-menu popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                            {menu nodes=$node.children depth=$node.depth parent=$node}
                            {if $node.image_urls|count > 0}
                                <div class="cat-bottom-block" data-count="{$node.children|count}">
                                    {foreach from=$node.image_urls item=image_url}
                                        <p>
                                            <img src="{$image_url}" alt="{$node.label}">
                                        </p>
                                    {/foreach}
                                </div>
                            {/if} 

Changing the href of the top menu link.

[gabiferbe]

9 hours ago, JBW said:

9 hours ago, JBW said:

{if $node.children|count>0} href="{$node.url}"{else} style="cursor: context-menu"{/if}" data-depth="{$depth}"

Thank u, it worked i only had to change 0 to 1 {if $node.children|count>1}

 

[dtccomp]

Quote

 

I've changed the blocktopdropdownmenu.js to disable the categorie links. It's working fine on desktop, but not on mobile. Any idea how to change it also on mobile?

[kamppa]

I was unable to do this with Prestashop 8.

I found a Javascript method here:

https://www.sunnytoo.com/forums/topic/disable-click-on-parent-category-in-the-menu

 

jQuery(function($){
$('.ml_level_1').has('ul.mu_level_2').find('.ma_level_1').addCSS({'pointer-events': 'none', 'cursor': 'default'});
});

 

I just can't figure out the correct CSS classes to replace those .ml_level_1 etc.

ChatGPT gave an alternative if jQuery is not in use:

 

document.addEventListener('DOMContentLoaded', function() {
    var level1Elements = document.querySelectorAll('.ml_level_1');

    level1Elements.forEach(function(level1Element) {
        if (level1Element.querySelector('ul.mu_level_2')) {
            var maLevel1Elements = level1Element.querySelectorAll('.ma_level_1');
            maLevel1Elements.forEach(function(maLevel1Element) {
                maLevel1Element.style.pointerEvents = 'none';
                maLevel1Element.style.cursor = 'default';
            });
        }
    });
});

Can someone please figure out the correct classes?