Category: Menu

How to Create Non-Clickable Weebly Parent Menus

10/7/2014

#nav-wrap .wsite-nav-0 a, .wsite-nav-1 a, .wsite-nav-2 a, .wsite-nav-3 a {

pointer-events: none;

}

N.B. This method works for most modern browsers. However it does not work for IE 10.0 or earlier. It does work for the current IE 11.0 browser.

Instructions

Inserting the code above will make the first four (4) parent (top-level) menu items of your Weebly website non-clickable. You would only want to do that if you have drop down or pop out sub-menu pages relating to parent menu items.
Important: make sure there is no comma ',' after the 'a' before the '{' bracket.
It is optional whether you insert a space before the '{' bracket.
Often the first parent menu item is HOME with no sub-menus. Having used the code above, to make HOME clickable again remove the code below.

.wsite-nav-0 a,

The code below makes the third (3rd) parent menu item non-clickable. All other parent menu items will be clickable. Remember, the 1st parent menu item is numbered '0'.

#nav-wrap .wsite-nav-2 a {

pointer-events: none;

}

To make the fifth parent menu item non-clickable you would add the code below before the { bracket.

.wsite-nav-4 a

and so on....

To find the main-style.css file follow this path in your Weebly website editor:

DESIGN > Edit HTML/CSS > CSS > main-style.css
Add your code (as above) at the very bottom of the main-style.css code by scrolling down in the right window.
The third parent menu, 'Web Services' on this website has been made non-clickable using this method - using the last code above.
We acknowledge Domz who offers a more technical explanation of this methodology for creating non-clickable Weebly parent menu items.