Make Top Level Navigation Menu Not Clickable in Weebly

Weebly offers easy site builder platform which may not be useful as it is for most of the users. For example, arranging pages in the required order is a pain in Weebly and making the top level navigation menu not clickable is not possible by default. As long as Weebly allows to modify the source CSS we can make such things possible by adding simple CSS code to the main CSS file “main_style.css”. In this article we will discuss how to make top level navigation menu not clickable in Weebly site.

Top Level Navigation Structure

Before proceeding, it is necessary to understand the basic structure of Weebly navigation menu. Right click on the menu on your published site and choose “Inspect” or “Inspect Element” option to open developer console in your browser. When you move your mouse over each top level navigation menu you can see the corresponding CSS classes. Each top level navigation menu is identified with a CSS class like “.wsite-nav-1”, “.wsite-nav-2″,”.wsite-nav-3″, etc. where 1 being the “Hoe” page generally.

The numbers may change based on your theme and note down the CSS class of the navigation menu you want to make it not clickable. Assume you want to make the second navigation menu not clickable and the corresponding CSS class is “.wsite-nav-2”.

Making The Menu Not Clickable

Now navigate to the Weebly code editor under “Theme > Edit HTML / CSS > Assets > main_style.css” and add the following CSS code.

.wsite-nav-2 {
pointer-events: none;
}

Save the changes and publish your site to see the second top navigation menu is not clickable and the cursor will not change to a hand on hover. If you want to make the cursor to the hand but still the menu should be not clickable then change the above code like below:

.wsite-nav-2 a:active {
pointer-events: none;
}

Similarly you can make all top level navigation menus not clickable by adding the corresponding CSS classes.

Removing the Top Level Menu in Mobile Navigation

Weebly has different navigation structure on mobile sites and clicking on the top menu will again display the list of menus items including the top menu. This enables to open the top menu link if it has a content but in our case we should remove this link from the list. Hence, add the following CSS to your “main.less” file:

.wsite-menu-master-item {
display: none !important;
}

After adding all the CSS codes, it may look something like below:

Save the changes and publish your site.

Hiding Top Navigation Pages from Search Engines and Users

• Hide the top navigation pages from search engines which will prevent search engines to crawl the empty pages. You can do this by checking the option “Hide this page from search engines” under the “Advanced” settings of each top level pages.
• Remember users can still access the pages by directly entering the URL on the browser’s address bar. Ideally setting 301 redirects should solve this problem, unfortunately Weebly does not allow to set redirects for the live pages. Hence you can’t stop the users from accessing the pages through address bar.