Click to learn more about the most recent premium and free Weebly templates.

Sometimes, you create a drop down menu with several pages and want the parent/top level page to be non-clickable.

For example: http://lamentiatemplate.weebly.com

When you click on PAGE LAYOUTS page in the site above, you will see that you can’t click through to go that page but you can click through all of its inner pages.

 

How to make a page non-clickable in Weebly 1

 

It’s because the PAGE LAYOUTS page doesn’t have content itself. The purpose of that page is to tell visitors where to find demo of page layouts of the template.

 

There isn’t any way to do that with default Weebly tools and SETTINGS. However, I’ll give you a quick tip to do that today.

Step 1.

Make sure the page you want non-clickable is created by choosing External Link option.

How to make a page non-clickable in Weebly 2

 

If it isn’t chosen as External Link option, please follow the link below to learn how to do that:

http://hc.weebly.com/hc/en-us/articles/201723843-Create-a-Navigation-Link-that-Leads-to-Another-Site

 

Step 2:

Instead of setting a specific link to that page, you just need to replace httl:// with # in External site area. See the screenshot below.

How to make a page non-clickable in Weebly 3

 

Click Save & Edit

 

Step 3:

You will need to add a few lines of code to HTML files so firstly, copy the following lines of code:

[html]<script type=”text/javascript”>
jQuery(document).ready( function(){
var $ = jQuery;
$(‘.wsite-menu-default a, .wsite-menu a, .baamboo-responsive-nav a’).click(function(){ var href = $(this).attr(‘href’); if(href==’http://javascript:void(0)’ || href==’http://javascript:;’ || href==’http://#’){ return false; } });
})
</script>[/html]

 

Now click on DESIGN then Edit HTML/CSS at the bottom left side. After that, click on tall-header.html

How to make a page non-clickable in Weebly 4

 

Scroll through to the bottom. (There is a lot of code in this section, but don’t worry too much about that as most of it can simply be ignored.)

Paste the code you’ve copied to above line:

How to make a page non-clickable in Weebly 5

How to make a page non-clickable in Weebly 6

 

Repeat the steps above for the rest of HTML file.

How to make a page non-clickable in Weebly 7

 

You can paste those lines of code to the HTML files of layouts you use; you don’t need to paste to all layouts.

E.g.: If you use No Header layout and Tall Header layout, just paste those lines of code to no-header.html and tall-header.html

Save your changes and you’re all done.

 

It’s pretty easy right? However, if you meet any issues or can’t do it, just leave your question on the comment section below. I’ll take a look at the issues for you.

Share This