Top Horizontal Menu - Hover Only (not clickable)

[eec]

How can I make TopHorizontalMenu only to show the hover menu options and not to respond to clicks.

 

Issue is that once user clicks on a Menu Item, they will get an ugly landing page listing the same Hover Menu Item, so I really prefer the TopHorizontalMenu not to take them anywhere by clicking on the Items instead show them the sub-menu items and let them chose from there only.

 

is there a fix for this?

 

please see in this link www.everlightamericas.com and click on "About ELA" menu item and see the ugly landing page, istead I want the page only get clicks on sub-menu items, in this case "Corporate Profile, ..."

 

 

[Mochi09]

up for this, we have the same problem bro

[vekia]

you use the same depth of categories tree for each main category?

or it's different?

[eec]

depths are the same.

 

main concern is with CMS pages that are placed on the Horizontal Menu... if user hovers only on the item the sub-menu appears nicely and they can chose and land on the desired page, but if they click on the manu item, a very ugly page appears showing the submenu items as list, I want to avoid this page. Hence remove clickablity of the Menu items.

 

 

[titanmancho]

I had a same problem after I install a module called 'OnBoarding'.

So I go back to the Modules again and I uninstalled the 'OnBoarding'.

Then it works again.

 

To go to the menu 'Modules' manually :

 

1. type url : YOURWEBSITE/psadmin/index.php?controller=AdminModules

 

2. click :  I understand the risks and I really want to display this page

 

3. uninstall 'OnBoarding'

 

Good luck

 

[sickshot]

last reply from titanmancho absolutely makes no sense as the issue described is there by default in top menu module...

still wonder if anybody found a solution for this?

 

actually I'm really curious where the developers took the idea of clicking on the category link and showind this ugly content...never seen anything like this anywhere. 

[Mila_omni]

 

If anyone is still searching how to do it, I just did it and it worked...

 

1. Go to themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

2. Add under .sf-menu > li > ul > li > a  this code:

pointer-events: none;

cursor: default;

3. Change hover color to the same with no-hover

 

Your final code should look like this:

.sf-menu > li > ul {

padding: 26px 30px 31px;

width: 100%; }

.sf-menu > li > ul > li > a {

pointer-events: none;

cursor: default;

text-transform: uppercase;

font: 600 16px/20px "Open Sans", sans-serif;

color: #333; }

.sf-menu > li > ul > li > a:hover {

color: #333; }

 

[eec]

Mila_omni Thanks for the advice. It worked for me but not exactly in the way mentioned above. And I will explain more details here since I believe it will be useful to others as well.

 

In our PS we do have different First Level menu items, e.g. HOME is there which is a non-expanding item, only it gets clicks and sends users to Main page, same holds true for Contact Us item which sends the user to the feedback form page. At the same time some items like PRODUCTS are expandable, which means once user hovers over them they drop down a list of choices. My problem was that not only these items where dropping the choice lists but also they were clickable, so if the user is not familiar with the concept of hovering over an item and waiting for the drop down which more or less people are not, and they tend to click on everything, we could not get the chance to show off our beautiful drop down menu and worse people would have been landed on meaningless intermediate pages to choose the product category whereas the whole thing could have been eliminated if we could make the expandable items of the main menu un-clickable,  and at the same time the non-expandable ones clickable.

 

Above solution is wonderfully smart in using CSS to inactive the clickable feature of the anchor tags would affect all items in same manner, this part is undesirable.

 

in our case since expandable items where created by the module through its menu items menu (in back office) "menu top link" and the CMS items were created with "Add a new Link" of the same Back office feature. They had inherently a different class. You need to verify this in your case easily by inspecting your page with firefox or chrome developer tools. 

 

in our case "menu top links" were instances of sf-with-ul class, hence adding this piece of CSS to overriden version of superfish-modified.css solved the problem:

.sf-menu a.sf-with-ul {
  pointer-events: none;
  cursor: default;
}

I started this thread Dec 2014 and today I am so happy that this issue has been resolved, you are all awesome thanks for your comments and help.

 

all the best

[marion v]

Hello

 

Can you tell me how to find the good line to insert the code ?

I've unsuccessfully tested many places.

 

 

Tks !!

 

Marion

[vekia]

i added solution that will remove href="" totally

https://www.prestashop.com/forums/topic/503428-top-horizontal-menu-make-categories-hover-only-not-clickable/?p=2390025

[eec]

Hello

 

Can you tell me how to find the good line to insert the code ?

I've unsuccessfully tested many places.

 

instance.png

 

Tks !!

 

Marion

 

Hello Marion

 

I saw your screen shot, you can do the following,

1. find the CSS file which define the class "menu-title"; i noticed that in response to vekia you have mentioned you are not using the module that we are referring to, but that is not a problem, still there should be a CSS file where this class is being defined, you can either find out which module is being used for the menu, then search folders of that module. Or do an extensive search on contents of CSS files looking for the class name. Might sound strange but in dealing with different web programs that are using their own MVC implementation and are not easy to follow sometimes this method comes very handy. Once you find the CSS file, the place there that class is being defined is where you would put that code.
2. Note, if you have different types of menu items like I do, and want them to act differently apparently you need to make sure they are not in similar CSS class. If it doesn't make sense now once you implement the above you will realize what I am referring to.

Hope this helps,

Good Luck

[marion v]

Damn i cant find this file even with an extended research.

 

I'll contact dev.

 

Many tks !!

 

Marion