blunor blunor - 4 years ago 107
Javascript Question

wordpress Bootstrap menu loads on hover, want it to load and unload on click only

I am having a menu error on my site poltr.com

To reproduce error:
- Go to poltr.com
- Resize window to mobile size ( so that the bootstrap menu is folded showing the burger bun(button) )
- click the burger bun(button).
- click "Landsdele"
- When trying to click "Kategorier", "Landsdel" or "Byer" nothing happens.
(you can better understand it if you try it on mobile).

I would like the sub menu to fold down as it does when the window is in desktop size. Furthermore I would like that when the links in the submenu is clicked the sub page is loaded.

I don't if I gave the right code, please use inspect element method.



.nav > li {
position: relative;
display: block;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #101010;
}

<li id="menu-item-3379" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-3379 dropdown"><a title="Kategorier" href="#" data-toggle="dropdown" class="dropdown-toggle">Kategorier <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li id="menu-item-5317" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5317"><a title="Nyheder" href="http://poltr.com/nyheder/">Nyheder</a></li>
<li id="menu-item-3381" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3381"><a title="Action" href="http://poltr.com/action">Action</a></li>
<li id="menu-item-3382" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3382"><a title="Adrenalin" href="http://poltr.com/adrenalin">Adrenalin</a></li>
<li id="menu-item-3387" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3387"><a title="Cd indspilning &amp; Musik" href="http://poltr.com/cd-indspilning-og-musik">Cd indspilning &amp; Musik</a></li>
<li id="menu-item-3383" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3383"><a title="Dans" href="http://poltr.com/dans">Dans</a></li>
<li id="menu-item-3384" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3384"><a title="Det Kreative" href="http://poltr.com/det-kreative">Det Kreative</a></li>
<li id="menu-item-3385" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3385"><a title="Det Sjove" href="http://poltr.com/det-sjove">Det Sjove</a></li>
<li id="menu-item-3390" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3390"><a title="Gøgl &amp; Sport" href="http://poltr.com/goegl-og-sport">Gøgl &amp; Sport</a></li>
<li id="menu-item-3386" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3386"><a title="Kostumer" href="http://poltr.com/kostumer">Kostumer</a></li>
<li id="menu-item-3388" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3388"><a title="Smag &amp; Drinks" href="http://poltr.com/smag-og-drinks">Smag &amp; Drinks</a></li>
<li id="menu-item-3389" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3389"><a title="Specialiteter" href="http://poltr.com/specialiteter">Specialiteter</a></li>
<li id="menu-item-3391" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3391"><a title="Til Vands" href="http://poltr.com/til-vands">Til Vands</a></li>
<li id="menu-item-3392" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3392"><a title="Transport" href="http://poltr.com/transport">Transport</a></li>
<li id="menu-item-3393" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3393"><a title="Udlejning" href="http://poltr.com/udlejning">Udlejning</a></li>
<li id="menu-item-3394" class="menu-item menu-item-type-taxonomy menu-item-object-kategori menu-item-3394"><a title="Wellness" href="http://poltr.com/wellness">Wellness</a></li>
</ul>
</li>




Answer Source

In your http://poltr.com/wp-content/themes/polterabend/library/js/scripts.js You have a function toggling sub-menus display:

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {

  $('.menu-item-has-children').hover(function() {
    $(this).css('background-color', '#0f7d6b');
    $(this).find('.dropdown-menu').css('display', 'block');
  }, function() {
    $(this).css('background-color', '#129d86');
    $(this).find('.dropdown-menu').css('display', 'none');
  });
}

As you may see it makes in display:block or display:none only for the screen width over 768px - seems like there's no script that control less screen width, so you need to add it. If it is there somewhere you may change this function to something like this to work on click, not on hover:

$('.menu-item-has-children').click(function() {
  $(this).css('background-color', '#0f7d6b');
  $(this).find('.dropdown-menu').css('display', 'block');
});

// This code may be different but you can change it to work for you - this is the core idea
$("html").on('click touchstart', function(e){
  // close menu when clicking outside
  if( !$(e.target).parents('ul').hasClass('dropdown-menu') ){
    $(this).parents('.menu-item-has-children').css('background-color', '#129d86');
    $(this).parents('.dropdown-menu').css('display', 'none');
  }
});

To be more clear: replace the first block of code with the second one

UPDATE

ok, here is a better solution:

you need to add this css:

.menu-item-has-children.dropdown-active {
  background-color: #0f7d6b;  
}

.menu-item-has-children.dropdown-active .dropdown-menu{
  display: none;
}

and then toggle classes with js:

/* if is above or equal to 768px */
if (responsive_viewport >= 768) {

  $('.menu-item-has-children').hover(function() {
  	$(this).addClass('dropdown-active');
  }, function() {
  	$(this).removeClass('dropdown-active');
  });
} else {
	$('.menu-item-has-children').click(function() {
	  $(this).toggleClass('dropdown-active');
	});
}

so now, you need to add css, remove the code I previously suggested and replace all this code http://prntscr.com/9mbpe9 with the one above

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download