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.
Related
I have a script that makes active menu item with moving line, but this is one-page and I want that during scroll active menu change. I tried diffrent scripts here but it doesn't work.
Here is the HTML code:
<div class="nav-container">
<ul class="menu">
<li><a class="active" href="#home">Home</a></li>
<li>Skup</li>
<li>Sprzedaż</li>
<li>Serwis</li>
<li>Kontakt</li>
<div id="line"></div>
</ul>
JS(on fiddle because stack wants more details) :
https://jsfiddle.net/6y6qj02y/
You are looking for the Scrollspy.
This is how you can do it:
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>
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.
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>
Can someone please point me to where I can go to find info on how to create a mobile menu (drop list) for the code bellow? All the tutorials that I have found has been on switching pages, nothing for filters such as bellow. I am using the isotop plugin to navigate through my site.
<!-- SMOOTH MENU DIV -->
<div id="nav-button"> </div>
<nav id="smooth-menu" role="navigation" class="main-nav-links responsive-nav">
<ul id="filters" data-option-key="filter">
<li>Home</li>
<li>About Danielle</li>
<li id="one">My Work
<ul class="second-level">
<li>Kids and Family</li>
<li>Babies</li>
<li class="last">Seniors</li>
</ul>
</li>
<li id="two">Info
<ul class="second-level">
<li>Session Fees</li>
<li>Finished Art</li>
<li class="last">About Your Session</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<!-- end nav -->
I ended up using an alternative solution. I went with a different menu.