Step 1. Identify your navigation's "iD' or "class"

Right click on your navigation, click "Inspect Element", and find the div that highlights your entire navigation menu. For this theme's navigation, the div is "<div class="nav-wrap">". The class is "nav-wrap". We will use this class later in the CSS file as ".nav-wrap".

---

Step 2. Open Weebly's HTML/CSS Editor

Click on​ "Design" at the top, then click on "Edit HTML/CSS" in the bottom-left.

---

Step 3. Add CSS code

Click on "main-style.css" on the left and add the code below to the CSS file. Change the text in orange to the ID or Class you obtained from Step 1. Change the bold text to the numerical position of the parent menu item you wish to make non-clickable. For example, since "STORE" is the 4th parent menu item in the demo site, naturally we use "4" in the code.

/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
.nav-wrap .wsite-nav-4 a {
   pointer-events: none;
}

---

You're done! 
Publish your site to make your parent menu item non-clickable!

---

Tips & additional information

You may need to make more than one parent menu item non-clickable. Let's say we want to make the 3rd parent menu item non-clickable in addition the 4th parent menu item. To do this, we'll use the code from Step 3, but add on to it as shown in orange below.

/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
.nav-wrap .wsite-nav-4 a, .wsite-nav-3 a {
   pointer-events: none;
}

To make your parent menu item non-clickable, but retain the CSS properties of the parent menu item when it is hovered, add the orange code to the code in Step 3 as shown below.

/* Deactivated Menu Links
--------------------------------------------------------------------------------*/
.nav-wrap .wsite-nav-4 a:active {
   pointer-events: none;
}

---

comments powered by Disqus