2 replies · opened Mar 5, 2019
Hi,
Site url: http://pz.icarteam.us
I am using a top bar with a couple of drop-down menus. They work fine on the desktop screen, but when I am loading the site on a phone, the dropdown links do not function. Is there something in CSS or JS that I can change to enable the drop downs from top bar to work on mobile devices?
Hello,
Thank You so much for reporting this to us! This is a bug and a fix will be applied shortly with an Update. Meanwhile, please find the following code in the js/functions.js File inside the menufunctions: function() Function Block:
if( $('#primary-menu').hasClass('on-click') || ( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) ) {
$('#primary-menu li:has(ul) > a').on( 'click touchend', function(e){
$(this).parents('.sub-menu').siblings().find('ul,.mega-menu-content').removeClass('d-block');
$(this).parent('li').children('ul,.mega-menu-content').toggleClass('d-block');
e.preventDefault();
});
}and add the following code just after the above codes:
if( $('.top-links').hasClass('on-click') || ( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) ) {
$('.top-links li:has(ul,.top-link-section) > a').on( 'click touchend', function(e){
$(this).parents('li').siblings().find('ul,.top-link-section').removeClass('d-block');
$(this).parent('li').children('ul,.top-link-section').toggleClass('d-block');
e.preventDefault();
});
}This will definitely fix the issue. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thank you, guys! That patch did help. Case closed.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard