We Keep Coding

mmenu keep parent menu a link

I am using js mmenu on the shopify site. I run into issue which I cant figure out.
When there is a dropdown menu, parent link becomes not clickable and has #mm-0 at the end of it. I need to keep it as is and link to its own page.
You can see code below. Right now Links "Products" and "About" go to https://www.irestorelaser.com/products/irestore-laser-hair-growth-system#mm-0 . Any help would be great!
<div id="nav" >
<ul>
<li >How it works</li>
<li class="Selected">Products
<ul>
<li class="Selected">Laser Helmet</li>
<li >All Products</li>
</ul>
</li>
<li >About
<ul>
<li >Warranty</li>
</ul>
</li>
</ul>
</div>

function suddenly stopped working after a simple change

Hello good people from stackoverflow.
I got a question.
I recently added a responsive menu to my website. It worked fine. But I added a second, different menu. One made for mobiles. I hide it on a normal scale and show it at the mobile version. But the function suddenly stopped working. No names were changed except for one but that should not interfere with it. Here is the old code:
<div class="header">
<div class="container">
<ul class="nav">
<li><a class="active_page" href="index.php">Home</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
≡
</li>
</ul>
</div>
</div>
And here is the new code:
<div class="header">
<div class="container">
<ul class="nav">
<li><a class="active_page" href="index.php">Home</a></li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="header_mobile">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Projects</li>
<li>About</li>
<li>Contact</li>
<li class="icon">
≡
</li>
</ul>
</div>
</div>
And last here is the function:
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
It is all linked properly because it worked before. I hope anyone can help me with this.
Thanks in advance.
EDIT: Here is the link to the website, just scaled it to mobile to see it: http://portfoliotristan.esy.es/index.php

function myFunction() {
document.getElementsByClassName("nav")[1].classList.toggle("responsive");
}
You are selecting the first 'nav' item. You need to select the second nav item by changing 0 to 1.

Bootstrap dropdown menu suddenly stopped working after adding ajaxToolkit:SlideShowExtender

Well, as the title said, my problem is that after add ajaxToolkit:SlideShowExtender to my Main.aspx, that page's Bootstrap dropdown menu stop working, and when i go to other page, drop down menu comeback to life itself. If i remove ajaxToolkit:SlideShowExtender from my Main.aspx, the Bootstrap dropdown menu begin to work again. So how can i put these 2 together?
I put my dropdown menu to my master page and all other pages is using that master page. Everything work fine unless i add ajaxToolkit:SlideShowExtender.
I also put these scripts on the head of the master page.
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/bootstrap.min.js"></script>
And these are the drop down menu code in the master page.
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Item</li>
<li class="dropdown">
Account<b class="caret"></b>
<ul class="dropdown-menu">
<li>Log in</li>
<li>Registration</li>
<li>Log out</li>
<li>Modify</li>
</ul>
</li>
<li class="dropdown">
Orders<b class="caret"></b>
<ul class="dropdown-menu">
<li>Cart</li>
<li>History</li>
</ul>
</li>
<li id="adminControl" runat="server" visible="false" class="dropdown">
Admins<b class="caret"></b>
<ul class="dropdown-menu">
<li>Item management</li>
<li>Order managerment</li>
<li>Article managerment</li>
</ul>
</li>
<li>Search</li>
<li>About</li>
<li>Contact</li>
</ul>
</div> <!--/.nav-collapse -->
</div> <!--/container -->
</div> <!--/navbar navbar-default navbar-fixed-top -->
Than you all for reading this question and for all your help.

Zurb Foundation dropdown menu isn't working with Meteor

I'm trying to use a dropdown menu with Meteor, but it's now working. I don't know if it's related with the packages that I have installed:
https://atmosphere.meteor.com/package/zurb-foundation
https://atmosphere.meteor.com/package/iron-router
https://atmosphere.meteor.com/package/accounts-entry
https://atmosphere.meteor.com/package/iron-router-progress
Here is the dropdown example:
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
user
<ul class="dropdown">
<li>Contact</li>
<li>Friends</li>
</ul>
<ul class="dropdown">
<li>Contact</li>
</ul>
</li>
</ul>
</section>
What might be the problem? The console prints this error: Uncaught TypeError: Cannot read property 'is_hover' of undefined
Thanks.

you can do $('document').foundation('reflow') on rendered template like here: zf5.meteor.com

This works great using the zurb-foundation package you linked to:
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
user
<ul id="drop1" class="f-dropdown" data-dropdown-content>
<li>Contact</li>
<li>Friends</li>
</ul>
</li>
</ul>
</section>

Zurb Foundation Top Nav bar having multiple back buttons

I'm creating a whole website using Java / JSP, but also using zurb foundation.
Now I know that you have to call $(document).foundation(); to make foundation work, but because I'm using ajax to switch between screens (does not have that flash effect of that white screen when switching between pages) when I open my home page it executes that method ($(document).foundation();) and everything looks fine.
The problem comes in with the Top Nav bar that I have. If it goes over to the mobile version, you get that Menu button on the right hand side, and switching there between sub categories, shows a "Back" button to go back to the parent category.
The problem begins when I open my next page (using ajax), it now has components on there namely components. These in fact looks way better on foundation than the normal standard html ones. When I execute $(document).foundation(); again, the components goes into the foundation styled components but now with the top nav bar, there are 2 back buttons and that messes around with the functionality of the back button as well i.e. breaks it. When I go to the screen again, it adds another back button and so on.
Is there someway to revert the foundation() method, and then call it again to refresh it?
This is my Top Nav bar.
<div class='fixed contain-to-grid' style='height:67px;'>
<div class='large-12 columns' id='topNav'>
<nav class='top-bar'>
<ul class='title-area'>
<!-- Title Area -->
<li class='name'>
<h1><a href='#'><img src='img/logoLeft.png' style="width:181px;" id='logo'/></a></h1>
</li>
<!-- Remove the class 'menu-icon' to get rid of menu icon. Take out 'Menu' to just have icon alone -->
<li class='toggle-topbar menu-icon'><a href='#'><span>Menu</span></a></li>
</ul>
<section class='top-bar-section'>
<ul class="left">
<li class="divider" id='div1' style='display:none;'></li>
<li class="has-dropdown" id='nonFinNav' style='display:none;'>Non-Financial
<ul class="dropdown">
<li><label>Heading 1</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li class="has-dropdown"><a href="#" id='leaveMain'>Cat 4</a>
<ul class="dropdown">
<li><label>Leave</label></li>
<li>SubCat 1</li>
<li class="divider"></li>
<li>SubCat 2</li>
<li class="divider"></li>
<li>SubCat 3</li>
<li class="divider"></li>
</ul></li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div2' style='display:none;'></li>
<li class="has-dropdown" id='FinNav' style='display:none;'><a href="#" style='margin- right:29px;'>Financial</a>
<ul class="dropdown">
<li><label>Heading 2</label></li>
<li>Cat 1</li>
<li class="divider"></li>
<li>Cat 2</li>
<li class="divider"></li>
<li>Cat 3</li>
<li class="divider"></li>
<li>Cat 4</li>
<li class="divider"></li>
</ul>
</li>
<li class="divider" id='div3' style='display:none;'></li>
</ul>
<!-- Right Nav Section -->
<ul class='right'>
<li><a id='logOffButton' style='display:none;'>Log Off</a></li>
<li class='divider'></li>
<li><a id='helpButton'>Help</a></li>
<li class='divider'></li>
</ul>
</section>
</nav>
</div>
</div>
If you need any more info, please ask and I will respond.
Thanks.

I've been having the same issue. I couldn't find a solution through foundation, but I did come up with something that's suitable for my purposes.
Firstly, instead of simply doing $(document).foundation(), I execute
$(document).foundation({topbar : {custom_back_text: false }});
This makes it so that the "back" button is now named after its previous menu. So, each back button title should be unique. It's important that they are unique. Now, I have a script that removes all duplicate menu items, based on their link text. I have it set to trigger each time someone clicks on a menu item with sub-items (foundation gives these a class of 'has-dropdown not-click'). This way the script only runs when it's truly needed.
function (){
var uniqueBackButtons = [];
$.each($('.back'), function(){
if(uniqueBackButtons.indexOf(this.childNodes[0].childNodes[0].childNodes[0].data) == -1){
uniqueBackButtons.push(this.childNodes[0].childNodes[0].childNodes[0].data);
}
else{
$(this).remove();
}
});
}

I also have the same issue.
I think the reason why I do have multiple "back" button is because of multiple declaration of this code:
$(document).foundation();
Notice that I have embedded this
<script src="js/app.js"></script>
that also contains that script. It works to me. I put all my scripts on js/app.js