Value Websites News

How to Create Non-Clickable Weebly Parent Menus

10/7/2014

Weebly have addressed this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions below.

Add this, or a version of this code, to the bottom of your main-style.css file to make your first four top level Weebly website menu items non-clickable.

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

Weebly have addressed this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions above.

22 Comments

gary knight link

22/9/2014 22:03:23

Very helpful post. This was driving me mad. Should be a simple operation to implement but it seems that its not that straight forward. My solution was to have the top menu page as an alternative to the drop down list. Just listed all the pages in the drop down and added links. I also had feedback that some people wern't able to click the drop down links. maybe an old browser issue, so this work around solved this problem too!

Terry Alve

24/9/2014 23:02:46

That's wonderful Gary. Pleased it has worked for you.

Rich link

5/10/2014 01:38:11

I added this to the bottom of the CSS file:

#nav-wrap .wsite-nav-1 a, .wsite-nav-2 a, .wsite-nav-3 a, .wsite-nav-4 a, .wsite-nav-5 a, .wsite-nav-6 a {
pointer-events: none;
}

Unfortunately, the second page on the nav bar is still clickable. Any advice would be appreciated. Thanks

Terry

5/10/2014 11:21:47

Hi Rich - I see what you mean. When I view your website on my latest version of Chrome - the second top menu item is clickable; you would prefer it wasn't.
As a trial I inserted your code into my VW website CSS and it worked perfectly.
I can only suggest that you carefully check your website CSS code and see if it begins differently from: #nav-wrap .wsite-nav-1 a,

Ric link

5/10/2014 14:35:09

Thanks Terry for taking a look. The code is a real help for my other websites that work just fine with it. Your posting has been very helpful to me. Thanks again.

Terry

6/10/2014 03:50:59

Pleased to be of help Rick. I see the issue above (2nd top menu clickable) has been sorted. That's wonderful.

Julian link

15/11/2014 00:05:05

Hey, thanks so much for this great trick! I was wondering if there's a way to have a menu item that isn't an actual page (on my site "About" and "History"), since I just made it un-clickable and only have 10 pages to work with. Sorry if I didn't explain that well enough.

Terry @ Value Websites

15/11/2014 02:34:20

I am not sure if I am reading you right Julian but I think you are asking how to link to an external (off site) web page. The path from the Weebly editor is:
PAGES >> + ADD >> External Link
Enter the external URL.
This then becomes a page on your website and you can place it in your menu at any level TOP .... down.
Get back to me if this is not what you are asking.
Of course you would not want to make this page unclickable,
Cheers,
Terry

Dan link

4/2/2015 11:26:54

How do I make a tab under a parent tab unclickable? I have a parent tab that has secondary tab that needs to be unclickable. Then, under the secondary tab is a menu with multiple clickable tabs.

Thanks

Terry

11/2/2015 07:10:33

Good question. The instructions above apply only to top level (parent) menus. I have not explored the issue of how to make lower level menu items unclickable in Weebly sites. There will be a solution. Keep searching....

Mart link

11/2/2015 05:44:31

Hi Terry,

Firstly, thanks for the great guide for the non clickable parent menus. It's been very handy for the designing of my site.
I have a slight problem though that I can't seem to get the two menus in the 'more' drop down non clickable.

I wish for the 'Club Charter' and 'Links' to be non clickable but I'm going round in circles with it. Can you help?
The code I'm trying is:

#nav-wrap .wsite-nav-0 a, .wsite-nav-1 a, .wsite-nav-2 a, .wsite-nav-3 a, .wsite-nav-4 a, .wsite-nav-5 a, .wsite-nav-6 a, .wsite-nav-7 a, .wsite-nav-8 a, .wsite-nav-9 a{
pointer-events: none;
}

Many thanks

Terry

11/2/2015 07:35:55

As above... Good question. The instructions above apply only to top level (parent) menus. I have not explored the issue of how to make lower level menu items non clickable in Weebly sites. There will be a solution. Keep searching....

idavid link

16/3/2015 00:29:15

Brilliant! That fixed it for me. Many thanks.

Nerea

10/4/2015 16:29:57

It doesn't work for me, parent menu page is still clickeable :(

Eileen link

6/5/2015 17:46:29

I inserted your code to reflect the page I want to be non-clickable, but it is still clickable: #nav-wrap .wsite-nav-5 a {

pointer-events: none;

}

I tried putting the code on the bottom of main HOME page as well as on the page CONNECT that I do not want to be clickable.

Please advise.

Rich

7/5/2015 06:07:48

Eileen I believe that you are not in the right place to add the code. You need to click on the Design tab on your Weebly site. Look at the bottom left and click Edit CSS, then go to the bottom of your main-style.css file and add the code. I hope this helps.

Sutton link

25/9/2015 09:09:08

I've used this CSS code on 3 different Weebly sites, and it works great! But I've built a new site for a client (www.fruitguysfarmtoschool.com), and it's not working for the Our Program tab. Any ideas on why? Thanks!

Rich.D

25/9/2015 11:07:03

This code works most of the time with Weebly Themes. I think that some of the Themes just don't. A couple of times I got it to work when it didn't at other times. Don't know what I did different but I got it to work. Play around a bit with the placement of the menu. One trick was when I couldn't get one to be non clickable I moved one that needed to be clicked in place of it.

Sutton link

25/9/2015 15:30:43

Hmmm... it's a client site, so the pages need to be in the order that they want. But I'll keep that tip in mind for other projects where the menu order doesn't matter. Thanks!

And, I did find a solution! The workaround on this post (http://www.baamboostudio.com/how-to-make-a-page-non-clickable-in-weebly/) solved it for me!

Charlie

11/11/2015 01:05:02

#wsite-menus .wsite-menu {
pointer-events: none;
}

How to define specific menus is something I am trying to figure out,

Deevy link

4/1/2016 13:46:38

I am trying to make the “Resources” page not clickable on my site (http://mhhsdeca.weebly.com). Here is the code I am inserting:

#nav-wrap .wsite-nav-4 a {
pointer-events: none;
}

What am I doing wrong?

Terry - Manager Value Websites link

5/7/2016 10:21:46

Weebly have address this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions below.

How to Create Non-Clickable Weebly Parent Menus

Weebly have addressed this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions below.

Add this, or a version of this code, to the bottom of your main-style.css file to make your first four top level Weebly website menu items non-clickable.

Weebly have addressed this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions above.

Leave a Reply.

Author

Recent Posts

Popular Posts
Click image for Post

Archives

Categories

How to Create Non-Clickable Weebly Parent Menus

Weebly have addressed this issue in 2016, see http://preview.tinyurl.com/weeblynon-clicklink Value Websites advises that you should apply this methodology and NOT follow the instructions below.

Add this, or a version of this code, to the bottom of your main-style.css file to make your first four top level Weebly website menu items non-clickable.

Weebly have addressed this issue in 2016, see http://preview.tinyurl.com/weeblynon-clicklink Value Websites advises that you should apply this methodology and NOT follow the instructions above.

Leave a Reply.

Author

Recent Posts

Popular PostsClick image for Post

Archives

Categories

Weebly have addressed this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions below.

Weebly have addressed this issue in 2016, see
http://preview.tinyurl.com/weeblynon-clicklink
Value Websites advises that you should apply this methodology and
NOT follow the instructions above.

Popular Posts
Click image for Post