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.
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.
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.
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.
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
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:
Repeat the steps above for the rest of HTML file.
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.
WOW! Amazing!. Thank You BaambooStudio
it’s opening a about:blank screen upon clicking to menu
Hi,
If you follow our guide exactly, it’ll work.
I did. It’s not
Sent from Tia’s iPhone
You should try again as we can and others can.
If you already purchased our template, please submit a ticket then we’ll look into the issue for you.
Thanks.
Hi, It also comes up with a “about:blank” screen when the page is clicked. Have you solved this problem. I tried numerous times and all to no avail. I even asked my friend to make sure I was not missing any steps, he said i was doing it to the letter. Can you help us Baamboo?
Dee,
Please post your site URL here so I can take a closer look. Thanks.
danielloweyear10sciencesrp.weebly.com The non-clickable page is for the Parent Menu titled in the navigation bar “Planning Experiment”.
Thankyou
Dee,
You made an error when entering http://# in External site area (Step 2).
However, it seems you fixed it yourself. Thanks.
danielloweyear10sciencesrp.weebly.com I used the tutorial for the parent pages “Planning Experiment” and “Acquiring Data”. Please help me, it is very urgent
Does this code only work if you have purchased the Baamboo template?
– a coding n00b 🙂
It works!
This is the only solution that actually works to make menu items unclickable in Weebly. I tried several methods until I found this one. Thank you!
Is there a way you can do this on an already existing website instead of starting from scratch?
Yes, you can do this on an existing website. Thanks.
Life-saving. Works perfectly. Thank you!
Hello, I seem to be having the same issue as Dee outline below. I’ve tried multiple times to re-follow the steps and I cannot get the page to not be clickable. Everything looks good except when I click on the header in the menu bar that I don’t want to be clickable, a new window opens and says “safari can’t connect to the server” Please advise! Thank you!
The yellow box of external link is only visible in edit mode.
Hi, this works great. My question is: will having this suppressed link cause my web page SEO to suffer??