Jump to content
bobbything

[SOLVED] Disabling Parent category links in top menu

Recommended Posts

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 

post-681427-0-78718000-1379366520_thumb.jpg

Edited by bobbything (see edit history)

Share this post


Link to post
Share on other sites

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

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

 

btw.  you said:

YUU7rUr.png

 

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

Share this post


Link to post
Share on other sites

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].

  • Like 3

Share this post


Link to post
Share on other sites

hello thank you for your solution.

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

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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 by sinoland (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

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 by julian walker (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);
});

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);
});

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);
});

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

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);
})

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites

 

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!

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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 by ricky11 (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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;

Share this post


Link to post
Share on other sites

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!

 

post-991802-0-74704400-1438713059_thumb.png

Edited by Araksopoulos (see edit history)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by milaonline (see edit history)

Share this post


Link to post
Share on other sites

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 by JBW (see edit history)

Share this post


Link to post
Share on other sites
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}" 

Share this post


Link to post
Share on other sites
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}

 

 

Share this post


Link to post
Share on other sites
{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.

Share this post


Link to post
Share on other sites
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}

 

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More