Bootstrap3/BC Menu dropdown conflict with module_photogallery

forums_noreply@adobe.com — Wed, 05 Nov 2014 16:56:25 GMT

I'm building a site using Bootstrap3 framework, with BC Dynamic Menu (with jQuery courtesy Joe Watkins) for main navigation. Dropdowns (click or hover) working beautifully until I add a photogallery module, then the dropdown links disappear on click, which is a major problem on touchscreens. I've removed all things piece-by-piece to determine the dropdown links disappear 100% of the time when a photogallery module is on the page, and work appropriately 100% of the time without a photogallery present (well, 1 exception - i'm seeing same issue on Layouts/OnlineShop/large_product.html).

Does anyone have any recommendations to fix this conflict with my Menu Nav dropdown links and the photogallery module? Really, really appreciate any suggestions. Unfortunately, the site nav is rendered non-functional on touchscreens due to these disappearing dropdown link conflicts (only Home and Smile Gallery links are not dropdowns).

EXAMPLES

Here are 3 examples of pages with a photogallery/dropdown conflict on click. To test issue, click the main nav dropdown links (e.g. "Locations, Treatment, etc":

Smile Gallery

Rapid City, SD

Spearfish, SD

I'm right in the middle of transitioning this site to the responsive framework, so not all links will work. Here are 3 examples of Nav links working properly on click (no photogallery module):

Results - Before & After

Evaluation

Smile For A Lifetime

REFERENCE

I do not understand jQuery very well, I've pieced together what I could to make it all work. Here are the 2 scripts I use to get the BC Menu to work:

// - - - - - Dropdown Menu v2 - JOE WATKINS.IO Dropdown Menu Toggle - - - - - - - - - - -

dropdownNavTweak : function(){

var $navContainer = $(".nav"),

$dropdownItems = $navContainer.find("li.dropdown");

$dropdownItems.each(function(){

var $parentItem = $(this).find("a:first");

$parentItem.addClass("dropdown-toggle").attr("data-toggle","dropdown").append(" <em class='icon-caret-down'></em>");

$(this).children("ul").removeClass().addClass("dropdown-menu");

$dropdownItems.show(); // shows dropdown images to prevent flicker - use CSS to hide " .nav li.dropdown {display:none;}" or ".navbar-nav li.dropdown {display:none;}" or ".navbarMinor-nav li.dropdown {display:none;}"

});

}, // end dropdownNavTweak (Comma needed if others follow}

... and ...

//////- -MENU- ////////

jQuery(document).ready(function ($) {

jQuery('.navbar .dropdown').hover(function() {

jQuery(this).addClass('extra-nav-class').find('.dropdown-menu').first().stop(true, true).delay(200).slideDown();

}, function() {

var na = $(this);

if (jQuery('.spanFloatLeftIfMobile').css('float') == "none") {

na.find('.dropdown-menu').first().stop(true, true).delay(500).slideUp('fast', function(){ na.removeClass('extra-nav-class') })

}

});

Adobe Community : All Content - All Communities

Bootstrap3/BC Menu dropdown conflict with module_photogallery