June 19, 2014

Make the Parent Menu not clickable in Weebly

Posted by Domz at 6/19/2014

Make Parent menu in Weebly not Clickable

Someone ask  in My Weebly Tricks Fan Page on how to make the parent menu not clickable but still showing the submenus below it within mouseover. With some research, thanks to stackoverflow, I found a very simple code that will solve this problem. No more long HTML, no jQuery but we only need to add a short property value  in your CSS.
We no longer need a demo for this tutorial, because you can easily imagine what we are trying to achieve.




But before we proceed, I need to explain the selectors involved in this tutorial. By default in Weebly and most sites, each menus and sub menus has their own links so it can be clicked.

Try to imagine you have 4 menus (with 2 submenus on the first two) like this:

A. Our Services
      a. On-Schedule Cleaning
      b. On-Schedule Trimming
B. Our Products
      a. Garden Tools
      b. Office Tools
C. FAQs
D. Contact

What we are trying to attain is, we cannot click on “Our Services” and “Our Products” parent menus but we can still see and click the submenus they have within mouseover.

On the other side, we can directly click on the “FAQs” and “Contact” parent menus because they don’t have any sub menus on them or we really intended to exclude them.

The first menu which is “Our Services” has a selector of #nav-wrap .wsite-nav-0 a, the numerical 0 means the start of the menu list, the next parent menu will then have #nav-wrap .wsite-nav-1 a and so on. Just remember it always starts with ZERO.

Ok time to apply it in your site. Assuming your first menu has submenus on it and you don’t want the parent menu to be clicked, just follow these simple steps.

1. Go to your site > Design Tab > look on your bottom left, click on the Edit CSS/HTML.

2. On your upper left, click the “main-style.css”. You will see sets of code on the right panel. Now scroll those codes to the very bottom and paste the following in a new line:

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

3. Save your template, publish your site and you will get what you've wanted.

4. If you want your first two menus then simply change the code on step 2 with this:

#nav-wrap .wsite-nav-0 a, .wsite-nav-1 a{
pointer-events: none;
}

We just added the red marked text with the correct numerical value that corresponds to the parent menu we are targeting. Just remember that you start counting from ZERO. Always use comma to separate selectors. You can then include more menus as many as you wanted but try to skip those parent menu with no submenus on it.

Conclusion

I really don’t know this strange code “pointer-events” but thanks for asking, it is a valuable knowledge for everyone. I discovered it from http://stackoverflow.com/questions/3144050/use-css-to-make-a-span-not-clickable . You can also Google it for more detailed info.

Comment if this helps you, please visit my newly made FORUM, so we can help you more or you to help us. Thank You.

Get email updates and more access! (Free)
Email *
email marketing by activecampaign


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

21 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Great tip, I just used it on my website d3mconsulting.com It worked great!

    ReplyDelete
    Replies
    1. Hi Steven,
      Thanks for reading my tutorial. I visited your site and found it working. Your site is great, neat and clean. Like it.

      Delete
  3. Thanks a lot..I did it!

    ReplyDelete
  4. Bro my first Parent Menu is still clickable but everything else is fine.

    ReplyDelete
    Replies
    1. Please post your query at the forum for proper documentation. Thank You!

      Delete
    2. Same problem, my first parent menu is still clickable.

      Delete
  5. This worked! The simplest work-around I found. Thank you for sharing this!

    ReplyDelete
  6. Thank you! I've been looking all over for a solution to this and you came through nicely! Plus, it works!!

    ReplyDelete
  7. I think it is outdated because it wont work on my pc laptop

    ReplyDelete
  8. how about if you have a child menu with more menus?

    Like:

    HOME | PAGE1 | PAGE 2
    PageA
    PageB
    -pageX
    -pageY


    How do i make "PageB" not clickable?
    Thanks

    ReplyDelete
    Replies
    1. page A and B are supposed to be under page 1, and page X and Y under PageB.

      Delete
  9. for the above comment,

    Page A and B are supposed to be under page 1
    and page X and Y under Page B

    ReplyDelete
  10. Sorry to all anonymous comments. Please use the forum for queries.

    ReplyDelete
  11. Didn't work at first for me. Then changed #nav-wrap to #navigation and worked perfectly.

    Thanks!

    ReplyDelete
  12. It was caused by differences on templates selectors. Glad you make it.

    ReplyDelete
  13. Hello, it's not working for me at all and have no idea why!

    ReplyDelete
  14. i think weebly may have updated the selector, i used #topnav instead of #nav-wrap and it worked perfectly. many thanks for the tip!

    ReplyDelete
    Replies
    1. Hi Sabrina,

      Individual themes has differences. Best to check its code source.

      Delete
    2. Hi there,

      Since yesterday for one or another reason, this function does not work anymore.
      It worked fine with the following code:
      .wsite-nav-4 a{
      pointer-events: none;
      }

      Now it doesn't work anymore. Tried different things but cannot fix it.

      In the source code I found following entries:
      div class="nav desktop-nav"
      ul class="wsite-menu-default"
      li id="pg242030273857799387" class="wsite-menu-item-wrap wsite-nav-4"

      Played with them, but nothing...
      Can someone help please?

      Regards
      Kim

      Delete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top