Modern websites use the top menu item to open the drop-down menu. But what if you want to see the overall category, like "Perth Mint" which has sub-categories of "Wombat" and "Kangaroos".
So, for example, on Little Coin Shop's website, when Perth Mint is clicked the page will show all Wombats and Kangaroos.
I was hoping to change the offending Javasript but I couldn't find it, so searching Google I found a solution from https://wordpress.stackexchange.com/questions/325168/adding-sub-menu-item-makes-parent-item-unclickable.
Just add the following to /templates/footers/includes/scripts.template.html
if($(window).width() >= 767){
$('a.dropdown-toggle').click(function(){
window.location = $(this).attr('href');
});
};
This solution unfortunately caused an issue using the website on a tablet, where the "hover" function does not exist, making the submenu inaccessible to tablet users.
To fix it each menu item is split into two components. The nav-link text allows the hover event, and tablet users touch the item to go to the root URL and touching the adjacent down arrow (button element) shows the submenu div with the class dropdown-menu. The above JavaScript can be removed, and no additional JavaScript is required as it's part of Bootstrap's menu logic.
The B@SE code below goes into the [your_template_folder]/templates/cms/home.template.html.
[%content_menu content_type:'category' sortby:'sortorder,name' show_empty:'0'%]
[%param *header%]
<ul class="lvl1 navbar-desktop navbar-nav navbar-default flex-wrap d-none d-md-flex"
role="navigation" aria-label="Main menu">
[%/param%]
[%param *level_1%]
[%if [@next_level@]%]
<li class="nav-item dropdown dropdown-hover">
<a class="nav-link" href="[@url@]" >[@name@]</a>
<button class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</button>
<ul class="lvl2 megamenu dropdown-menu mt-0" >
[@next_level@]
</ul>
</li>
[%else%]
<li class="nav-item">
<a href="[@url@]" class="nav-link">[@name@]</a>
</li>
[%/if%]
[%/param%]
[%param *level_2%]
[%if [@next_level@]%]
<li class="dropdown dropdown-hover">
<a href="[@url@]" class="nuhover dropdown-item dropdown-toggle" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">[@name@]</a>
<ul class="lvl3 dropdown-menu dropdown-menu-horizontal">
[@next_level@]
</ul>
</li>
[%else%]
<li>
<a href="[@url@]" class="nuhover dropdown-item">[@name@]</a>
</li>
[%/if%]
[%/param%]
[%param *level_3%]
<li>
<a class="dropdown-item pl-5 pl-sm-4" href="[@url@]">[@name@]</a>
</li>
[%/param%]
[%param *footer%]
</ul>
[%/param%]F
[%/content_menu%]
You must be logged in to post a comment.