Main Navigation does not Close (JS error)

Solved
Highlighted
Excursionist
22 0 4

Hi guys,

 

we are having all of the sudden an issue with our main menu which is not closing anymore once it's open.

It seems like somehow .mainNavBar is not a function all of the sudden. 

I tried to revert to older versions where it was working but it's throwing the same errors. 
I thought it might be connected to the missing files, but those files were missing for a longer time and are only font files from my understanding.


Website: noahsbox.com

 

Screenshot 2019-12-20 at 20.53.40.png

 

here is the specific piece of code that seems to cause the error:

exitNav: function () {
              var $mainNavBar = $(this._selectors.id);
              this.displayOrHideSharedElements($mainNavBar.mySection(), true);              
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.navBg);
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.hover);
              $mainNavBar.find(this._selectors.mainMenuDropdown + ', ' +  this._selectors.singleDropdown).css('display','');
              $(window).off('scroll', this._scrollHandler);
            },

Here is the entire Navigation JS code:

   theme.Navigation = (function () {    
          return {
            _selectors: {
              id: '#AccessibleNav',
              dim: '.dim',
              openedNav: '#AccessibleNav .nav-hover',
              closeOnMouseLeave: '.main-menu-dropdown, .site-nav--has-dropdown',
              nextNav: ".site-header .header-icons",
              topLevelMenuItems: '.site-nav--has-dropdown',
              childNavLinks: '.child-site-nav__link',
              subMenuDiv: '.child-div',
              sectionHeaderMenuItems: '.nav-section-header',
              bottomLevelMenuItems: '.grandchild-link .site-nav__link',
              siteHeaderId: '#header',
              mainMenuDropdown: '.main-menu-dropdown',
              generalMenu: '.nav-menu-js',
              singleDropdown: '.single-dropdown',
            },
            //Classes used to be added/removed/checked against
            _classes: {
              hover: 'nav-hover',
              navBg: 'mega-nav-bg',
            },
            //Event handler for scrolling the window
            _scrollHandler: null,


            init: function () {
              var self = this;
              self._scrollHandler = self.exitNav.bind(self);
               var navUL = $('#AccessibleNav').height(),
               navRows = navUL / 37,
               singleDMenu = false,
               multiNav = false;

               if ($(self._selectors.singleDropdown).length > 0){
                  var singleDMenu = true; 
               }             
               if (navRows > 1.2){
                  var multiNav = true;
                $('#AccessibleNav').addClass('multinav');
               }            

              if (!multiNav || singleDMenu) { 
               $('#AccessibleNav > .site-nav--active').mouseenter(function(){
                  if($('.search-dropdown').hasClass('searching') == false && !$('#AccessibleNav').hasClass('multinav')){
                  self.exitNav();
                }
               });
                  // If single row of link OR single dropdown                       
                $(self._selectors.topLevelMenuItems).mouseenter(function () {
                  // Close all open elements
                  theme.Search._closeSearch($('[data-section-type="header"]'));
                  $(self._selectors.topLevelMenuItems).removeClass(self._classes.hover);

                  if (singleDMenu){
                    // Add navBg to single dropdown link
                    $(this).addClass(self._classes.navBg);
                  }else{
                     // Add navBg to entire header for mega-menu
                    $(self._selectors.siteHeaderId).addClass(self._classes.navBg);
                  }
                  $(this).addClass(self._classes.hover);
                  $(self._selectors.dim).show();
                  $(window).scroll(self._scrollHandler);
                });               
                if (!singleDMenu){
                $(self._selectors.topLevelMenuItems).mouseleave(function () {  
                    setTimeout(function(){   
                    if ($('.main-menu-dropdown:hover').length == 0 && $('#AccessibleNav > .site-nav--has-dropdown:hover').length == 0){            
                        self.exitNav();     
                    }           
                    }, 500);
                  });
                }         

                if (singleDMenu){
                   // Remove single menu hover and exit nav
                 $(self._selectors.closeOnMouseLeave).mouseleave(function () {
                       $(this).removeClass(self._classes.navBg);
                         self.exitNav();
                });  
                }
                $(self._selectors.siteHeaderId).mouseleave(function () {
                 if ($('.search-dropdown').hasClass('searching') == false && $('#searchInput:hover').length == 0 && $('main-menu-dropdown:hover').length == 0 && !$('#AccessibleNav').hasClass('multinav')) {
                  self.exitNav();
                 }
                });                
              } else {
                 $(self._selectors.topLevelMenuItems, self._selectors.id,'#AccessibleNav > li').unbind("mouseenter mouseleave");
                  $(self._selectors.topLevelMenuItems).click(function (e) {
                    return false;                   
                  });
                  $(self._selectors.childNavLinks).click(function (e) {
                    e.stopPropagation();
                    return true;                   
                  });
                $(self._selectors.topLevelMenuItems, self._selectors.id).click(function () {
                  theme.Search._closeSearch($('[data-section-type="header"]'));
                    self.exitNav();
                     $(self._selectors.siteHeaderId).addClass(self._classes.navBg);
                    $(this).addClass(self._classes.hover);
                    $(self._selectors.dim).show();
                    $(window).scroll(self._scrollHandler);
                });   
                   $(window).click(function () {
                  if ($(self._selectors.topLevelMenuItems, self._selectors.id).hasClass(self._classes.hover)){
                    self.exitNav();
                  }
                 });
              }
              $(window).resize(function() {
                if ($(window).width() > 768){
               var naviUL = $('#AccessibleNav').height(),
               naviRows = naviUL / 37,
               singleDMenus = false,
               multiNavi = false;

               if ($(self._selectors.singleDropdown).length > 0){
                  var singleDMenus = true; 
               }            
               if (naviRows > 1.2){
                  var multiNavi = true;
                  $('#AccessibleNav').addClass('multinav');
               }else{
                  $('#AccessibleNav').removeClass('multinav');
               }

              if (!multiNavi || singleDMenus) {
                if (!multiNavi){
                 $('#AccessibleNav > .site-nav--active').mouseenter(function(){
                  if($('.search-dropdown').hasClass('searching') == false && !$('#AccessibleNav').hasClass('multinav')){
                  self.exitNav();
                }
               });
               }
                  // If single row of link OR single dropdown                       
                $(self._selectors.topLevelMenuItems).mouseenter(function () {
                  // Close all open elements
                  theme.Search._closeSearch($('[data-section-type="header"]'));
                  $(self._selectors.topLevelMenuItems).removeClass(self._classes.hover);

                  if (singleDMenus){
                    // Add navBg to single dropdown link
                    $(this).addClass(self._classes.navBg);
                  }else{
                     // Add navBg to entire header for mega-menu
                    $(self._selectors.siteHeaderId).addClass(self._classes.navBg);
                  }
                  $(this).addClass(self._classes.hover);
                  $(self._selectors.dim).show();
                  $(window).scroll(self._scrollHandler);
                });               
             if (!singleDMenus){
                $(self._selectors.topLevelMenuItems).mouseleave(function () {
                    setTimeout(function(){   
                    if ($('.main-menu-dropdown:hover').length == 0 && $('#AccessibleNav > li:hover').length == 0){            
                        self.exitNav();     
                    }           
                    }, 500);
                  });
                }    

                if (singleDMenus){
                   // Remove single menu hover and exit nav
                 $(self._selectors.closeOnMouseLeave).mouseleave(function () {
                       $(this).removeClass(self._classes.navBg);
                         self.exitNav();
                });  
                }
                $(self._selectors.siteHeaderId).mouseleave(function () {
                 if ($('.search-dropdown').hasClass('searching') == false && $('#searchInput:hover').length == 0 && $('main-menu-dropdown:hover').length == 0 && !$('#AccessibleNav').hasClass('multinav')){
                  self.exitNav();
                 }
                });                
              } else {
                 $(self._selectors.topLevelMenuItems, self._selectors.id, '#AccessibleNav > .site-nav--active').unbind("mouseenter mouseleave");
                  $(self._selectors.topLevelMenuItems).click(function (e) {
                    return false;                   
                  });
                  $(self._selectors.childNavLinks).click(function (e) {
                    e.stopPropagation();
                    return true;                   
                  });
                $(self._selectors.topLevelMenuItems, self._selectors.id).click(function () {
                 
                  theme.Search._closeSearch($('[data-section-type="header"]'));
                    self.exitNav();
                     $(self._selectors.siteHeaderId).addClass(self._classes.navBg);
                    $(this).addClass(self._classes.hover);
                    $(self._selectors.dim).show();
                    $(window).scroll(self._scrollHandler);
                });   
                   $(window).click(function () {
                  if ($(self._selectors.topLevelMenuItems, self._selectors.id).hasClass(self._classes.hover)){
                    self.exitNav();
                  }
                 });
              }
              }
              });
             
              this.Keyboard.init();
              this.Mobile.init();
              //Init the touch menu
              this.TouchMenu.init();
            },

            displayOrHideSharedElements: function (hide) {
              if (hide) {
                $(this._selectors.dim).hide();
                $(this._selectors.siteHeaderId).removeClass(this._classes.navBg);
              } else {
                $(this._selectors.dim).show();
                $(this._selectors.siteHeaderId).addClass(this._classes.navBg);

              }
            },
            /*
            =function exitNav()
            Completely hides all aspects of the nav, essentially closing it.
        */
            exitNav: function () {
              var $mainNavBar = $(this._selectors.id);
              this.displayOrHideSharedElements($mainNavBar.mySection(), true);              
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.navBg);
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.hover);
              $mainNavBar.find(this._selectors.mainMenuDropdown + ', ' +  this._selectors.singleDropdown).css('display','');
              $(window).off('scroll', this._scrollHandler);
            },

            initTimber: function () {
              timber.cacheSelectors();
              timber.drawersInit();
              timber.mobileNavToggle();
            },

            /*
            theme.Navigation.Keyboard

            Initiates the controls needed to navigate the main menu.
        */
            Keyboard: {
              /***** "Parent" References *****/
              _selectors: null,
              _classes: null,
              _scrollHandler: null,

              /***** Public Methods *****/

              init: function () {
                var self = this;
                //Init the "parent" references
                self._selectors = theme.Navigation._selectors,
                  self._classes = $.extend(theme.Navigation._classes, {
                  subMenuDiv: 'child-div'
                })
                self._scrollHandler = theme.Navigation._scrollHandler;

                //Close the nav if ESC is pressed
                $(document).keyup(function (e) {
                  if (e.keyCode === 27) {
                    theme.Navigation.exitNav();
                    return false;
                  }
                });

                $(self._selectors.topLevelMenuItems, self._selectors.id).each(function () {
                  var $this = $(this);
                  //Keydown event handler for top level menu items
                  $this.keydown(function (e) {
                    //If the input is one of the arrow keys, react to it
                    if (37 <= e.keyCode && e.keyCode <= 40) {
                      e.preventDefault();
                      var $this = $(this);
                      switch (e.keyCode) {
                        case 38: //Up - Close the nav
                          self._closeMainNav($(this));
                          break;
                        case 40: //Down - Open the nav
                          //If the nav is already opened, focus the first available menu item or header
                          if ($this.hasClass(self._classes.hover)) {
                            self._focusFirstAvailableSubMenu($this);
                          } else {
                            self._openMainNav($(this));
                          }
                          break;
                        case 37: //Left - Move to the nav on the left
                        case 39: //Right - Move to the nav on the right
                          self._openAdjacentNav($this, e.keyCode == 37, $this.hasClass(self._classes.hover));
                          break;
                      }
                    }
                  });
                  //Keydown event handler for menu section headers
                  $this.find(self._selectors.sectionHeaderMenuItems).keydown(function (e) {
                    if (37 <= e.keyCode && e.keyCode <= 40) {
                      e.preventDefault();
                      e.stopPropagation();
                      switch (e.keyCode) {
                        case 38: //Up - Focus the top level nav for this menu
                          var $topNav = $(this).closest(self._selectors.topLevelMenuItems);
                          $topNav.children('a').focus();
                          break;
                        case 40: //Down - Go to the first bottom level menu item
                          $(this).parent().find(self._selectors.bottomLevelMenuItems + ':first').focus();
                          break;
                        case 37: //Left - Focus the menu title to the left
                        case 39: //Right - Focus the menu title to the right
                          self._focusNextTitle($(this).parent(), e.keyCode == 37);
                          break;
                      }
                    }
                  });


                  $this.find(self._selectors.bottomLevelMenuItems).keydown(function (e) {
                    if (37 <= e.keyCode && e.keyCode <= 40) {
                      e.preventDefault();
                      e.stopPropagation();
                      var $this = $(this);
                      var myIndex = $this.parent().index();
                      switch (e.keyCode) {
                        case 38: //Up - Focus the menu item above this one
                        case 40: //Down - Focus the menu item below this one
                          self._focusSiblingMenuItem($this.parent(), e.keyCode == 38);
                          break;
                        case 37: //Left - Focus the menu item to the left of this one
                        case 39: //Right - Focus the menu item to the right of this one
                          self._focusAdjacentMenuItem($this.closest(self._selectors.subMenuDiv), e.keyCode == 37, myIndex)
                          break;
                      }
                    }
                  });
                });
              },
              /*
                =function _focusFirstAvailableSubMenu($nav)
                Finds the first focusable item in $nav and focuses it
                =Params
                (jQuery) $nav - The nav container to search in
              */
              _focusFirstAvailableSubMenu: function ($nav) {
                var toFocus = $nav.find(this._selectors.sectionHeaderMenuItems + ':first');
                if (toFocus && toFocus.length > 0) {
                  toFocus.focus();
                } else {
                  $nav.find(this._selectors.bottomLevelMenuItems + ':first').focus();
                }
              },
              /*
                =function _openMainNav($nav, ignoreFocus)
                Opens and displays the $nav passed in
                =Params
                (jQuery) $nav - The nav container to display
                (bool) ignoreFocus - (optional) If true, focuses closest sub menu 
                                     item. Otherwise it focuses the top level menu 
                                     item.
              */
              _openMainNav: function ($nav, ignoreFocus) {
                //Set styles for outside of the nav
                theme.Navigation.displayOrHideSharedElements();
                //Open the nav itself
                $nav.find(this._selectors.mainMenuDropdown).show();
                $nav.addClass(this._classes.hover);
                //Focus the first element
                if (!ignoreFocus) {
                  this._focusFirstAvailableSubMenu($nav);
                } else {
                  $nav.children('a').focus();
                }
                $(window).scroll(this._scrollHandler);
              },
              /*
                =function _closeMainNav($nav)
                Closes the $nav passed in.
                =Params
                (jQuery) $nav - The nav container to close
            */
              _closeMainNav: function ($nav) {
                //Unset styles for outside of the nav
                theme.Navigation.displayOrHideSharedElements($nav.mySection(), true);
                //Close the nav itself
                $nav.find(this._selectors.mainMenuDropdown).hide();
                $nav.removeClass(this._classes.hover);
                $(window).off('scroll', theme.Navigation._scrollHandler);
              },
              /*
                =function _getAdjacentElement($nav, goLeft, selector)
                Get the adjacent element matching the selector of the 
                passed in element $nav.
                =Params
                (jQuery) $nav - The element to get the adjacent of
                (bool) goLeft - If true, get the "previous" element. Otherwise
                                get the "next" element
                (string) selector - The element to search for
            */
              _getAdjacentElement: function ($nav, goLeft, selector) {
                if (goLeft) {
                  return $nav.prev(selector);
                } else {
                  return $nav.next(selector);
                }
              },
              /*
                =function _openAdjacentNav($nav, goLeft, ignoreFocus)
                Opens the nav adjacent to the current one
                =Params
                (jQuery) $nav - The currently opened menu nav
                (bool) goLeft - If true, get the "previous" menu nav. 
                                Otherwise get the "next" one
                (bool) ignoreFocus - (optional) If true, focuses closest sub menu 
                                     item. Otherwise it focuses the top level menu 
                                     item.
            */
              _openAdjacentNav: function ($nav, goLeft, ignoreFocus) {
                var $adjacent = this._getAdjacentElement($nav, goLeft, this._selectors.topLevelMenuItems);
                if ($adjacent.length > 0) {
                  this._closeMainNav($nav);
                  this._openMainNav($adjacent, ignoreFocus);
                }
              },
              /*
                =function _focusNextTitle($nav, goLeft)
                Focuses the menu title adjacent to the current one
                =Params
                (jQuery) $nav - The currently focused menu title
                (bool) goLeft - If true, focus the menu title to the left.
                                Otherwise focus the one on the right
            */
              _focusNextTitle: function ($nav, goLeft) {
                var $adjacent = this._getAdjacentElement($nav, goLeft, this._selectors.subMenuDiv);
                if ($adjacent.length > 0) {
                  $adjacent.find(this._selectors.sectionHeaderMenuItems).focus();
                } else {
                  this._openAdjacentNav($nav.closest(this._selectors.topLevelMenuItems), goLeft);
                }
              },

              _focusSiblingMenuItem: function ($nav, goUp) {
                var $sibling;
                if (goUp) {
                  $sibling = $nav.prev();
                  if ($sibling.length > 0) {
                    $sibling.children('a').focus();
                  } else {
                    var $closestTitle = $nav.closest(this._selectors.subMenuDiv).children('a');
                    if($closestTitle.length > 0) {
                      $closestTitle.focus();
                    } else {
                      $nav.closest(this._selectors.topLevelMenuItems).children('a').focus();
                    }
                  }
                } else {
                  $sibling = $nav.next();
                  if ($sibling.length > 0) {
                    $sibling.children('a').focus();
                  }
                }
              },

              _performAdjacentMenuItemFocus: function($adjacentList, index) {
                var $menuItems;
                if($adjacentList.hasClass(this._classes.subMenuDiv)) {
                  $menuItems = $adjacentList.find(this._selectors.bottomLevelMenuItems);
                } else {
                  $menuItems = $adjacentList;
                }
                index = $menuItems.length - 1 < index ? $menuItems.length - 1 : index;
                $menuItems.eq(index).focus();
              },
              /*
                =function _focusSiblingMenuItem($nav, goUp)
                Focuses the menu item above or below one
                =Params
                (jQuery) $nav - The currently focused menu item
                (bool) goUp - If true, focus the menu item above $nav. 
                              Otherwise get the one below
            */
              _focusAdjacentMenuItem: function ($nav, goLeft, index) {
                var $adjacentList = this._getAdjacentElement($nav, goLeft, this._selectors.subMenuDiv + ',' + this._selectors.bottomLevelMenuItems);
                if ($adjacentList.length > 0) {
                  this._performAdjacentMenuItemFocus($adjacentList, index);
                } else {
                  this._openAdjacentNav($nav.closest(this._selectors.topLevelMenuItems), goLeft);
                  /*if(!$nav.is(':focus')) {
                        var $newNav = $(':focus', $nav.closest(this._selectors.id));
                        this._performAdjacentMenuItemFocus($newNav, index);
                    }*/
                }
              },
            },//END Keyboard
            initMobileNav: function () {

			function docSpacing(){
              // Init header height script
              var hHeight = $("#header").height(),
              hPosition = $("#header").data('position'),
              mobileSticky = $(".mobile-cart-buttons").data('sticky'),
              mobileLocation = $(".sticky-footer").data("mobile"),
              mobileNavDiv = $('.sticky-footer'),
              mobilehHeight = $(".sticky-footer").height(),
              mobileProdBtns = $('.product-top-buttons'),
              mobilePromoDiv = $('.mobile-promo'),
              mobilePromo = $('.mobile-promo').height(),
              deskPromo = $('.desk-promo').height(),
              mobileCartBtns = $(".cart-top-buttons");

			  // Set main menu dropdown to always append below header
			 $('.main-menu-dropdown, .js-search-dropdown').css("top", hHeight);

              if (window.innerWidth  > 768) {
              	// If desktop 
                if (hPosition) {
                	// If sticky header
                  $('main.main-content').css('margin-top', hHeight);
                } else {
                  $('main.main-content').css('margin-top', 'initial');
                }
                	$('main.main-content').css('padding-top', 0);
                	$('body').css('margin-bottom', 0);
                	$('#PageContainer').css({
                    		    'margin-top': '0',
                    		    'padding-top': 0
                    	});
              }else if($('body').hasClass('template-product') || $('body').hasClass('template-cart')){
              	// If product or cart page
                if($('body').hasClass('template-product') && !(mobileSticky) && window.innerWidth < 769){
                	// If product page without sticky add to cart buttons (mobile)
                	if (mobileLocation == 'top'){
                		// If mobile nav is on top
 						$('main.main-content').css('margin-top', mobilehHeight + mobilePromo);
 						$('main.main-content').css('margin-bottom', 0 );
 						 $('main.main-content').css('padding-top', 0);
 						 $('body').css('margin-bottom', 0 );
 						 mobileNavDiv.css('bottom', 'initial');
                	}else{
                		if (mobilePromo){
                			// if product promo bar is turned on
							$('main.main-content').css('margin-top', mobilePromo);
							$('main.main-content').css('padding-top', '4%');
                		}else{
                    		$('main.main-content').css('margin-top', '4%');
                    		$('main.main-content').css('padding-top', 0);
                   		 }
                    	$('body').css('margin-bottom', mobilehHeight );
                    	mobileNavDiv.css('top', 'initial');
                    }
                }else if ($('body').hasClass('template-product') && mobileSticky && window.innerWidth < 769){
                	// If product page with sticky add to cart buttons (mobile)
					if (mobileLocation == 'top'){
						var newHeight = mobilehHeight + mobileProdBtns.outerHeight() + mobilePromo;
               			$('main.main-content').css('margin-top', newHeight); 
               			$('main.main-content').css('margin-bottom', 0 );
               			$('main.main-content').css('padding-top', 0);
               			mobileProdBtns.css("top", mobilehHeight + mobilePromo);
               			$('body').css('margin-bottom', 0);
               			mobileNavDiv.css('bottom', 'initial');
               		}else{
               			if (mobileProdBtns.outerHeight() != 0){
               				mobileProdBtns.css("padding-top", '15px');
               			}

               			if ((mobileProdBtns.outerHeight() + mobilePromo) == 0){
							$('main.main-content').css('margin-top','4%')
               			}else{
               				$('main.main-content').css('margin-top', mobileProdBtns.outerHeight() + mobilePromo); 

               			}
               			mobileProdBtns.css("top", 0 + mobilePromo);
               			$('body').css('margin-bottom', mobilehHeight );
               			mobileNavDiv.css('top', 'initial');
             	  	}
             	  }
	             if($('body').hasClass('template-cart') && window.innerWidth < 769){
	             	// If cart page
			           if (mobileLocation == 'top'){
			           		var newCartHeight = mobilehHeight + mobileCartBtns.outerHeight() + mobilePromo;
			           		$('main.main-content').css('margin-top', newCartHeight); 
			           		$('main.main-content').css('margin-bottom', 0 );
			           		$('body').css('margin-bottom', 0);
			           		mobileCartBtns.css("top", mobilehHeight + mobilePromo);
			           		mobileNavDiv.css('bottom', 'initial');
			            }else{
							$('main.main-content').css('margin-top', mobileCartBtns.outerHeight() + mobilePromo);
							$('body').css('margin-bottom', mobilehHeight );
							mobileCartBtns.css("top", mobilePromo);
							mobileNavDiv.css('top', 'initial');
			            }
			         }

			  }else if($('body').hasClass('template-article') && window.innerWidth  < 769){
			    	if (mobileLocation == 'top'){
                		// If mobile nav is on top
                		mobilePromoDiv.css('top', 0);
                		mobileNavDiv.css('bottom', 'initial');
                		$('main.main-content').css('margin-top', 0);
 						$('#PageContainer').css({
 							'margin-top': mobilehHeight + mobilePromo,
 							'margin-bottom': '4%',
 							'padding-top': 0
 						});
 						$('body').css('margin-bottom', 0 );

                	}else{
                		if (mobilePromo){
                			// if product promo bar is turned on
                			$('main.main-content').css('margin-top', '4%');
							$('#PageContainer').css('margin-top', mobilePromo);

							mobilePromoDiv.css('top', 0);
                		}else{
                			$('main.main-content').css('margin-top', '4%');
                    		$('#PageContainer').css({
                    		    'margin-top': 0,
                    		    'padding-top': 0
                    	});
                   		}
                   		$('#PageContainer').css('margin-bottom', '4%');
                      $('body').css('margin-bottom', mobilehHeight );
                      mobileNavDiv.css('top', 'initial');
                    }
              }else{
              	if (window.innerWidth < 769){
					if (mobileLocation == 'top'){
 						$('main.main-content').css('margin-top', mobilehHeight + mobilePromo );
 						$('main.main-content').css('margin-bottom', '4%' );
 						$('body').css('margin-bottom', 0);
 						mobileNavDiv.css('bottom', 'initial');
 				    }else{
 				    	if (mobilePromo){
                			// if product promo bar is turned on
							$('main.main-content').css('margin-top', mobilePromo);
							$('main.main-content').css('padding-top', '4%');
                		}else{
                    		$('main.main-content').css('margin-top', '4%');
                    		$('main.main-content').css('padding-top', 0);
                   		}
						$('body').css('margin-bottom', mobilehHeight );
						mobileNavDiv.css('top', 'initial');
               		}
                  }
         	  }
			}
			docSpacing();
              //Run on resize
              $(window).resize(function() {
               docSpacing();
              });
            },

We have no idea what changed recently and even when trying to revert an older version it seems to still not work correctly. We would be eternally grateful for any hints that lead us in the right direction.

 

Merry Christmas & a Happy New Year!

Best,
Moritz

0 Likes
Highlighted
Trailblazer
133 29 42

This is an accepted solution.

In the following piece of code, replace "this.displayOrHideSharedElements($mainNavBar.mySection(), true);" line with "$(".dim").hide();"

exitNav: function () {
              var $mainNavBar = $(this._selectors.id);
              this.displayOrHideSharedElements($mainNavBar.mySection(), true);              
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.navBg);
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.hover);
              $mainNavBar.find(this._selectors.mainMenuDropdown + ', ' +  this._selectors.singleDropdown).css('display','');
              $(window).off('scroll', this._scrollHandler);
            },

 
It should look like following code snippet

exitNav: function () {
              var $mainNavBar = $(this._selectors.id);
              $(".dim").hide();
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.navBg);
              $mainNavBar.find(this._selectors.topLevelMenuItems).removeClass(this._classes.hover);
              $mainNavBar.find(this._selectors.mainMenuDropdown + ', ' +  this._selectors.singleDropdown).css('display','');
              $(window).off('scroll', this._scrollHandler);
            },
- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
Highlighted
Excursionist
22 0 4

Hi m_waqas,

 

thanks for the prompt reply. I have implemented this and it works like charm!
any idea why the other one stopped working all of the sudden? 

We have never touched any code around the navigation and it's the same as it comes with the theme.

We are a bit confused about how it could break without us changing anything.


Thanks again - you really saved the day here!

Best,
Moritz

 

0 Likes
Highlighted
Trailblazer
133 29 42

I'm glad to hear that it works for you. I can't say much why it stopped working because I have no idea about your code.

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
Highlighted
Shopify Partner
400 30 51

@m_waqas 

Hi, sorry to say but you need to check code because once menu open it is not close when I remove my cursor from the menu link or click again anywhere on a page. So, it needs to be fixed.

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted
Trailblazer
133 29 42

@Akshay_V  The code I suggested is no longer on the site, please add it back and it'll work correctly.
Here you go https://community.shopify.com/c/Technical-Q-A/Main-Navigation-does-not-Close-JS-error/m-p/627035/hig...

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com
Highlighted
Shopify Partner
400 30 51

@Bra_mo 

Please follow the guideline of @m_waqas and check it is working or not. If need any additional support then please let me know.

Akshay Vaghasiya

Shopify Expert | Skype: akshayvaghasiya84
 - Like and Mark as an Accepted Solution if my reply helpful
 - Feel free to contact me on akshayvaghasiya84@gmail.com or akshayvaghasiya@lavitastic.com for any queries
 - Want to modify or custom changes on store hire me .
0 Likes
Highlighted
Excursionist
22 0 4

Hi @Akshay_V & @m_waqas thanks for your help here.

 

As far as I can tell the code has been on the website the entire time and it's working at the moment.

Is there still anything wrong? I'm testing it in google Chrome and Safari.

0 Likes
Highlighted
Trailblazer
133 29 42

Hi @Bra_mo I've tested it at your site and it is working correctly, I think there is no need for any other action.

- Was my reply helpful? Click Like and Accept as Solution
- Want to implement a custom solution? Feel free to contact me at waqas4346@gmail.com