Hi,
premise: by toggle I intend to click and expand the hamburger icon when window size gets small, whereas in large (>768) you see the standard menu.
I got the code from a working page, and am trying to get bootstrap toggle menu working on another page (different “site”), but for some reason it doesn’t work.
I tried it in jsfiddle, and works fine there too.
I tried adding the following (not together) snippets (gathered from the web), at the end of page
<script type="text/javascript">
$('.dropdown-toggle').dropdown();
</script>
<script type="text/javascript">
$(document).ready(function() {
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
</script>
but still no joy.
The code is in a smarty tpl file, with various
{if}...{else}...{/if}
statements, in order to show or not part of the menu based on the user’s access condition.
Here is the code - I removed all if/else, ids, and hrefs stuff to light en the snip.
<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
<div class="fz-top-nav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="scroll-top navbar-brand">test</a><br />
</div><!-- .navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="Menu-S" class="dropdown-toggle" data-toggle="dropdown" href="#">asd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Menu-S" href="q">jhf</a></li>
<li><a id="Menu-S" href="q">gde</a></li>
<li class="divider"></li>
<li><a id="Menu-S" href="q">ddd</a></li>
<li><a id="Menu-S" href="q">ggg</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="Menu-D" class="dropdown-toggle" data-toggle="dropdown" href="#">ggg<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Menu-Ds" href="x">rer</a></li>
<li class="divider"></li>
<li><a id="Menu-D" href="x">htr</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="Menu-B" class="dropdown-toggle" data-toggle="dropdown" href="#">lll<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Menu-f" href="d">iyf</a></li>
<li><a id="Menu-f" href="d">hfs</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="Menu-r" class="dropdown-toggle" data-toggle="dropdown" href="#">jsds<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Menu-r" href="h">hes</a></li>
<li><a id="Menu-r" href="f">jgr</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menu-e" href="e">gde</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menu-Ae" href="e">eee</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menu-a" href="#" class="Lgg">fff</a></li>
</ul>
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="Menf">oyt<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Menu-g" href="g">ljk</a></li>
<li><a id="Menu-y" href="yt">ure</a></li>
<li><a href="e">jte</a></li>
<li><a id="Menu-g" href="g">gde</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menuk" href="k">k</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menk" href="k">kkkkk</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menkk" href="k">hgf</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menh" href="h">ftyh</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Mend" href="d">ufd</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a id="Menud" href="#" class="fde">gfv</a></li>
</ul>
<ul class="nav navbar-nav navbar-right pull-right">
<li class="dropdown">
<a id="Menun" class="dropdown-toggle" data-toggle="dropdown" href="#">lmb<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a id="Menun" href="n">nnn</a></li>
<li><a id="Menub" href="b">bbb</a></li>
<li class="divider"></li>
<li><a id="Menv" href="v">vvv</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /fz-top-nav -->
</div><!-- /navbar navbar-default navbar-fixed-top header -->
What am I missing, or doing wrong?
Thank you