Separating jquery events from same classname elements - javascript

I'm trying to make a scrollable list of items with two buttons: up and down. My goal is to show a single item whenever I click on any of the two buttons.
I'm using jQuery event slideUp() but whenever I click on the button all the list items slides up. I couldn't separate the event for each item. Help?
$(document).ready(function(){
$(".bott").click( function() {
$(".item").slideUp();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>


Maintain a counter to track which item you are sliding up or down. Check the following sample and do the same for the sideDown()(counter-- on sliceDown()).
$(document).ready(function(){
var counter = 1;
$(".bott").click( function() {
$(".item:nth-child(" + counter + ")").slideUp();
counter++;
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>


$(document).ready(function(){
var i = 0;
$(".bott").click( function() {
$(".item:eq("+i+")").slideUp();
i++;
});
$(".bott2").click( function() {
i--;
$(".item:eq("+i+")").slideDown();
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>TEST</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="css/style.css" rel="stylesheet">
<script src="js/menuscroll.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item"> Home </li>
<li class="nav-item"> About </li>
<li class="nav-item"> Services </li>
<li class="nav-item"> Contact </li>
</ul>
</div>
<div class="col-sm-3">
<div class="menu-wrapper">
<div class="scroll-bottom">
<button type="button" class="bott btn-block">DOWN</button>
</div>
<div class="scroll-top">
<button type="button" class="bott2 btn-block" >UP</button>
</div>
<ul class="menu">
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
<li class="item">D</li>
<li class="item">E</li>
<li class="item">F</li>
<li class="item">G</li>
<li class="item">H</li>
<li class="item">I</li>
<li class="item">J</li>
</ul>
</div>
<div class="paddles">
</div>
</div>
</body>
</html>

Related

Hamburger Menu is not opening on my webpage while using bootstrap. How do I fix this?

My navbar hamburger menu is not opening and I have no clue why? The links show fine on a big screen but the navbar wont open on a smaller screen. I have tried changing the tags in the header and deleting things and refreshing the page to figure out the issue but nothing works. I am new to Bootstrap and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Megan-Keyes</title>
</head>
<body>
<!--Navbar-->
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
<div class="container">
<div class = "header-my-name">
<header><h2>Hi</h2></header>
</div>
<button class="navbar-toggler"type="button" data-bs-toggle="collapse"
data-bs-target=#navmenu>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item">
Currency Converter
</li>
<li class="nav-item">
Famous Landmarks
</li>
<li class="nav-item">
Project 3
</li>
<li class="nav-item">
Project 4
</li>
<li class="nav-item">
Project 5
</li>
<li class="nav-item">
Project 6
</li>
<li class="nav-item">
Project 7
</li>
<li class="nav-item">
Project 8
</li>
</ul>
</div>
</div>
</nav>
<!--NavBar Color and text center-->
<section class="bg-dark text-light p-5 text-center">
</section>
<!--My Project Displays-->
<main>
<div id = "currency-converter-project">
<iframe src="Currency-Converter/index.html" name="projectWindow1" width="100%" height="100px"></iframe>
</div>
<div id = "famous-landmarks-project">
<iframe src="Famous-Landmarks/index.html" width="100%" height="500px"></iframe>
</div>
</main>
</body>
</html>

Link bootstrap javascript file <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Why isn't my Hamburger menu example code working?

I'm trying to get this hamburger menu to work
Here is the example code source
https://www.jqueryscript.net/menu/responsive-multi-level-hamburger-nav.html
I'm using Visual Studio 2019 and am not sure why this is giving me so much trouble? The menu either is expanded completely as text at code launch or it is 3 lines that do not respond when I click on it. The example seems pretty simplistic, but I haven't been able to get it to work like shown in the example.
[
$(document).ready(function () {
//alert("Menu");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body {
/*background-image: url('../../images/grandOpening1.jpeg');*/
}
/*<script type="text/javascript" >
$(document).ready(function() {
alert("ready");
});
</script >*/
/*<script type="text/javascript" src="/wherever/whatever.js" / >*/
</style>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/main.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/style.css" rel="stylesheet" />
<script src="/Scripts/modernizr-2.8.3.js"></script>
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li>Home</li>
<!-- have submenu-->
<li class="has_child">
About
<ul class="sub-menu">
<li>Who We Are</li>
<li>Managment</li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
Projects
<ul class="sub-menu">
<li>Ongoing</li>
<li>Complete</li>
</ul>
</li>
<li>Brochure</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</section>
#*<script src="/path/to/cdn/jquery.min.js"></script>*#
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
#*<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>

For anyone else that is having a hard time getting this to work in a project, here is what I did to get it to work in Visual Studio 2019, you'll of course need to match my file/folder structure for the links and scripts, or alter those to match your own file/folder structure inside your project.
The index.cshtml file contents
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Responsive Multi-level Hamburger Nav Example</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css">
<link href="~/Content/style.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style>
body {
background: #f7f7f7;
}
.lead {
font-size: 1.5rem;
font-weight: 300;
}
.container {
margin: 0 auto;
max-width: 960px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Responsive Multi-level Hamburger Nav Example</h1>
<p class="lead">A responsive, mobile-friendly, multi-level hamburger navigation system (also called offcanvas menu) written in JavaScript (jQuery) and CSS/CSS3.</p>
</div>
<!-- hamburger section-->
<div class="humburger" id="hambuger_menu">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<!--main menu body-->
<section class="menu_body" id="menubody">
<div class="menu_body__item_wrapper">
<!-- menu list-->
<ul class="menu_list">
<li>Home</li>
<!-- have submenu-->
<li class="has_child">
About
<ul class="sub-menu">
<li>Who We Are</li>
<li>Managment</li>
</ul>
</li>
<!-- have submenu-->
<li class="has_child">
Projects
<ul class="sub-menu">
<li>Ongoing</li>
<li>Complete</li>
</ul>
</li>
<li>Brochure</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/JavaScript.js"></script>
</body>
</html>
And in the local javascript file
$(document).ready(function () {
//alert("Menu");
console.log("in (document).ready function");
var display_width = $(window).width();
var hamburger = $("#hambuger_menu");
var menu = $("#menubody");
$(hamburger).click(function (e) {
menu.toggleClass("open");
hamburger.toggleClass("open");
});
$(".menu_body__item_wrapper li.has_child").each(function (index) {
$(this).click(function (event) {
$('.sub-menu').eq(index).slideToggle();
event.preventDefault();
event.stopImmediatePropagation();
});
$('.sub-menu').click(function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
})
})
});

Grab this, it may help.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Test 3</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>

Move to Another Page Without Reload and Give Active Class To The Current Active Page Loaded

I have index.php, page1.php, page2.php, page3.php and I wanted to load their content in the index.php page within the div with #output but I don't want them to reload/refresh every time the navbar is clicked. Also, I want the active page has the active class in the active <li>.
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">Main</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page1.php">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page2.php">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="page3.php">Page 3</a>
</li>
</ul>
</nav>
<br>
<div class="container-fluid" id="output">
THE CONTENT FROM ANOTHER PAGE THAT'LL LOAD HERE
</div>
</div>
</body>
</html>
Thank you

Consider this example:
HTML:
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
Javascript:
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Live demo: http://jsfiddle.net/BoWw/77dyfbwd/
You can adjust this to what you posted.

AngularJS - ng-click doesn't fire my controller function

I am trying to call a function when my button is clicked. This code should work, but it doesn't fire the function I defined in my controller.
The code compile fine as show in the console, any idea?
Thanks!
This is my code:
<html lang="en" ng-app="myApp" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion</title>
<!-- Bootstrap -->
<script src="js/jquery-1.12.0.min.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystyles.css" rel="stylesheet">
<script >
var app = angular.module('myApp', []);
app.controller('navCtrl', function($scope) {
$scope.select=function () {
alert('hi');
};
});
</script>
</head>
<body>
<nav id="mynav"class= "navbar navbar-inverse " role="navigation" ng-controller="navCtrl" >
<div class="container">
<ul class="nav navbar-nav color-white ">
<li >
<a id="home" ng-click="navCtrl.select()"href="#" >home</a></li>
<li >
<a id="1" href="#" ng-click="navCtrl.select() ">About</a></li>
<li >
<a id="2" href="#" ng-click="navCtrl.select() ">Contact</a></li>
</ul>
</div>
</nav>
</body>

You don't need to specify 'navCtrl' in your HTML. Just call 'ng-click=select()'. If you had used controller-as='navCtrl' then you need to use navCtrl.select.

Just modify it as follows:
<ul class="nav navbar-nav color-white ">
<li >
<a id="home" ng-click="select()">home</a></li>
<li >
<a id="1" href="#" ng-click="select()">About</a></li>
<li >
<a id="2" href="#" ng-click="select()">Contact</a></li>
</ul>
Hope it works.!

How do I force an element in webkit to go back to original size?

I have an element that on focus via javascript changes to display absolute and covers its parent element. Then on blur back to default a table-cell.
What seems to happen is that the element just sits below the first table-cell, it doesn't go back to its original position?
This only appears to happen in webkit and I'm stuck for things to search for. Any help would be greatly appreciated.
The effect can be found on the search at the top.
Thanks in advance
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614"/>
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a
><ul class="nav-primary"><li class="nav-item">
<div class="dropdown">
<span>Whats New</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li>New In
<ul class="submenu">
<li>Mirella Leotards</li>
<li>Pointe Shoes</li>
<li>Accessories</li>
</ul>
</li>
<li>Don't Miss
<ul class="submenu">
<li>Jozette by Mirella Laser Cut Camisole Leotard</li>
</ul></li>
</ul>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li>Basic</li>
<li>Classic</li>
<li>Fashion</li>
<li>Premium</li>
<li>Regulation</li>
<li>Catsuits</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li>Tops</li>
<li>Warmups</li>
<li>Underwear</li>
<li>Shorts</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a></li>
<li><a class="subhead" href="#r">Street Dancewear</a></li>
<li><a class="subhead" href="#">Gymnastics</a></li>
<li><a class="subhead" href="#">Tutu's & Dresses</a></li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<img src="#" alt="Tappers & Pointers Leotard"><p>tappers & pointers</p>
</li>
<li class="featured-item">
<img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh"><p>sodanca<br></p>
</li>
</ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item">
<div class="dropdown">
<span>Footwear</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> By Bloch</li>
<li> By Capezio</li>
<li> By Freed</li>
<li> By Merlet</li>
<li> By Russian Pointe</li>
<li> Warm Up Boots</li>
<li> Pointe Accessories</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div></li></ul>
<ul class="nav-primary mobile">
<li class="nav-item"
><div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul
>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i></label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div><ul class="nav-secondary"><li class="nav-item nav-item-account">
<div class="dropdown">
<span>My Account</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>My Account</ul>
<ul>My Orders</ul>
</div>
</div>
</div>
</div>
</li><li class="nav-item nav-item-cart">
<div class="dropdown">
<span>£0.00<i class="bag-count">0</i></span>
</div>
</li></ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>

You have a table like structure, but you don't have any table row. Setting display to table-row on your de-nav element seems to fix your problem.
.de-nav {
display: table-row
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<!--[if lt IE 7]><html class="no-js ie6 oldie" lang="en"><![endif]-->
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<link rel="shortcut icon" href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/favicon.png?4100640853928591395" type="image/png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<meta name="geo.region" content="GB-DNC" />
<meta name="geo.placename" content="Doncaster" />
<meta name="geo.position" content="53.540019;-1.148724" />
<meta name="ICBM" content="53.540019, -1.148724" />
<title>Jazz Shoes</title>
<meta name="msvalidate.01" content="2586BFC237E15118F8BA18EF91E843A0" />
<meta name="p:domain_verify" content="9c7f882b38741d1a00862559ee7a8614" />
<meta property="og:image" content="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/logo.png?4100640853928591395" />
<link rel="stylesheet" href="http://detc.s3.amazonaws.com/assets/stylesheets/bootstrap/bootstrap.css">
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/styles.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link href="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/custom.scss.css?4100640853928591395" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/modernizr.js?4100640853928591395" type="text/javascript"></script>
<script src="//use.typekit.net/fuf1mwq.js"></script>
<script>
try {
Typekit.load();
} catch (e) {}
</script>
</head>
<body>
<!-- Begin toolbar -->
<header class="navbar-fixed-top top-banner toolbar-wrapper">
<div class="container">
<nav class="de-nav">
<a class="logo" href="/">
<div class="de-logo"></div>
</a>
<ul class="nav-primary">
<li class="nav-item">
<div class="dropdown">
<span>Whats New</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li>New In
<ul class="submenu">
<li>Mirella Leotards
</li>
<li>Pointe Shoes
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Don't Miss
<ul class="submenu">
<li>Jozette by Mirella Laser Cut Camisole Leotard
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<a href="#" role="button">
<span>Bodywear</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="http://www.dance-etc.co.uk/collections/leotards">Leotards</a>
<ul class="submenu">
<li>Basic
</li>
<li>Classic
</li>
<li>Fashion
</li>
<li>Premium
</li>
<li>Regulation
</li>
<li>Catsuits
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Dancewear</a>
<ul class="submenu">
<li>Tops
</li>
<li>Warmups
</li>
<li>Underwear
</li>
<li>Shorts
</li>
</ul>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Childrens Dancewear</a>
</li>
<li><a class="subhead" href="#r">Street Dancewear</a>
</li>
<li><a class="subhead" href="#">Gymnastics</a>
</li>
<li><a class="subhead" href="#">Tutu's & Dresses</a>
</li>
</ul>
</div>
<div class="divider"></div>
<div class="wrapper featured">
<div class="subhead">Dont Miss...</div>
<ul>
<li class="featured-item">
<a href="#">
<img src="#" alt="Tappers & Pointers Leotard">
<p>tappers & pointers</p>
</a>
</li>
<li class="featured-item">
<a href="#">
<img src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/sodanca-tank-leotard-with-striped-mesh.jpg?4100640853928591395" alt="Dodanca tank leotard with striped mesh">
<p>sodanca
<br>
</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<div class="dropdown">
<span>Footwear</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">Ballet Shoes</a>
</li>
<li>
<a class="subhead" href="#">Pointe Shoes</a>
<ul class="submenu">
<li> By Bloch
</li>
<li> By Capezio
</li>
<li> By Freed
</li>
<li> By Merlet
</li>
<li> By Russian Pointe
</li>
<li> Warm Up Boots
</li>
<li> Pointe Accessories
</li>
</ul>
</li>
<li>
<a class="subhead" href="#">Modern, Lyrical & Contemporary</a>
</li>
<li>
<a class="subhead" href="#">Dance Sneakers</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Jazz Shoes</a>
</li>
<li>
<a class="subhead" href="#">Tap Shoes</a>
</li>
<li>
<a class="subhead" href="#">Character Shoes</a>
</li>
<li>
<a class="subhead" href="#">Ballroom</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<ul class="nav-primary mobile">
<li class="nav-item">
<div class="dropdown">
<a href="#">
<span>Shop</span>
</a>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>
<li><a class="subhead" href="#">All Dancewear</a>
<li><a class="subhead" href="#">Bodywear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Footwear</a>
</li>
</ul>
</div>
<div class="wrapper">
<ul>
<li>
<a class="subhead" href="#">Legwear</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div id="global-search" class="nav-search">
<form class="site-search" role="search" method="get" action="/search">
<div class="wrapper">
<label for="q"><i class="fa fa-search"></i>
</label>
<input type="text" id="q" name="q" class="">
</div>
<input type="hidden" name="type" value="product" />
</form>
</div>
<ul class="nav-secondary">
<li class="nav-item nav-item-account">
<div class="dropdown">
<span>My Account</span>
<div class="dropdown-menu">
<div class="menu-container">
<div class="wrapper">
<ul>My Account
</ul>
<ul>My Orders
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item nav-item-cart">
<div class="dropdown">
<span>£0.00<i class="bag-count">0</i></span>
</div>
</li>
</ul>
</nav>
</div>
</header>
<!-- End toolbar -->
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.flexslider-min.js?4100640853928591395" type="text/javascript"></script>
<!-- <script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.zoom.js?4100640853928591395" type="text/javascript"></script> -->
<script src="http://detc.s3.amazonaws.com/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.bootplus.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/cloudzoom.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.tweet.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/jquery.fancybox.js?4100640853928591395" type="text/javascript"></script>
<script src="//cdn.shopify.com/s/files/1/0237/3793/t/2/assets/scripts.js?4100640853928591395" type="text/javascript"></script>
</body>
</html>

Categories

Resources