We Keep Coding

How to limit nested list <li> to only two levels in Jquery Sortable?

I am using sortable jquery plugin to create a nested list menu items dragged and dropped from left container to right container.
Each item from left container, I allow one level nested. However, in the right container, I don't want it to be nested more than two levels nested.
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
I really have no idea how can I check the nested level of item when it is dragged to from the left container to the right container. I just know the algorithm that if the items already has nested level 2, then I just simply remove <ol></ol> inside the <li>...</li> and append it back if it is in zero or one level nested.
Here to demonstrate what I want it to be and not to be:
Correct nested level which has only 2 levels nested item
Incorrect nested level which has more than 2 levels nested and which I want to set limit to it
Please kindly help me how can I do to check nested level and set limit to it? Thanks.

Since there is no one help answering on this, I would like to share what I have found on this.
The dept item for measuring and set limit for nested item option is something considered for adding into Jquery-sortable by the author, here reference.
Although it is not yet an option, there is an alternative add-on to the built-in method isValidTarget set fourth with plugin:
isValidTarget: function ($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 2, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
}
function Menu_init() {
// alert('Menu_init');
var oldContainer;
$("ol.example").sortable({
group: 'nested',
exclude: '.unsortable', // exclude module description from being drage droped
afterMove: function(placeholder, container) {
if (oldContainer != container) {
if (oldContainer)
oldContainer.el.removeClass("active");
container.el.addClass("active");
oldContainer = container;
}
},
isValidTarget: function($item, container) {
var depth = 1, // Start with a depth of one (the element itself)
maxDepth = 3, // *** 3 for my case
children = $item.find('ol').first().find('li');
// Add the amount of parents to the depth
depth += container.el.parents('ol').length;
// Increment the depth for each time a child
while (children.length) {
depth++;
children = children.find('ol').first().find('li');
}
return depth <= maxDepth;
},
onDrop: function($item, container, _super) {
container.el.removeClass("active");
_super($item, container);
li = $item;
// console.log(li.children().children().length);
var children = li.children().children();
var child;
var numOfChildren = children.length;
containerID = container.target[0].id;
if (containerID !== 'myUL') {
if (numOfChildren == 1) {
li.children('a').css({
'visibility': 'visible'
});
} else {
for (var element in children) {
child = children[element].nodeName;
if (child == 'LI') {
$(children[element]).find('a').css('visibility', 'visible');
} else if (child == 'A') {
$(children[element]).css('visibility', 'visible');
}
}
}
} else {
li.children('a').css('visibility', 'hidden');
}
}
});
// init filter
// itemFilter("myInput","myUL");
}
$(function() {
Menu_init();
})
div#icon-picker {
margin-top: 20px;
height: 300px !important;
width: 330px !important;
overflow: scroll;
}
div#icon-picker i {
display: inline-block;
padding: 5px;
}
div#icon-picker i:hover {
background: #ccc;
cursor: pointer;
}
body.dragging,
body.dragging *,
.dragged {
cursor: grabbing !important;
cursor: -webkit-grabbing !important;
}
ol.forms,
ol.forms ol,
ol.example2,
ol.example2 ol {
padding-left: 0 !important;
}
ol.forms li,
ol.example2 li {
display: block;
margin: 10px 5px;
padding: 11px;
border: 1px solid #cccccc;
color: #0088cc;
background: #eeeeee;
}
ol.example li a,
ol.example2 i {
font-size: 15px !important;
}
ol.form li>a,
ol.example2 li>a {
line-height: 0px;
margin-top: 15px;
font-size: 16px padding: 15px;
}
ol.example2 li:last-child {
margin-bottom: 10px;
}
li:hover {
cursor: grab !important;
cursor: -webkit-grab !important;
}
li>i {
padding: 4px 7px !important;
}
ol ol {
background: #eeeeee;
}
.dragged {
opacity: 0.5;
}
ol.example li.placeholder {
position: relative;
border: 3px dashed red;
opacity: 0.5;
}
ol.example li.placeholder:before {
/*position: absolute;*/
/* Define arrowhead*/
}
ol.example {
border: 1px solid #ccc;
}
.popover {
height: 400px;
overflow-y: scroll;
}
li>i {
padding: 15px;
cursor: pointer;
}
li .popover {
cursor: pointer;
}
li .popover i {
padding: 10px;
}
li .popover i:hover {
background: #CCC;
}
i.move_right {
visibility: hidden;
}
ol.forms li:hover>i.move_right {
visibility: visible;
animation-name: move-right;
animation-delay: 0s;
animation-duration: 1s;
/*animation-iteration-count: infinite;*/
/*animation-dir*/
}
.opts {
position: absolute;
left: 150px;
top: 0px;
z-index: 1000000000;
list-style-type: none;
/*background: #FFF;*/
}
button.saveChange {
position: absolute;
z-index: 1000000000;
top: 44px;
}
.opts li {
padding: 15px;
background: rgba(0, 0, 0, .8);
}
.bckg {
background: rgba(0, 0, 0, .6);
}
ol.example2>li[data-act='N'] {
text-decoration: underline;
}
/* search box inside select2*/
input.select2-input {
margin: 12px 0 8px 0 !important;
}
div[id^="target"]:not(#target1) {
display: none;
}
/* here to set height and auto scroll for both container*/
ol#myUL,
ol.example {
height: 600px !important;
overflow: scroll;
}
/*div.newMenu{ border: 1 solid black; }*/
ol.example2>li:last-child {
margin-bottom: 30px;
}
div.iconPopover {
top: 0px !important;
}
.modal {
background-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<form class="form-horizontal">
<session id="MenuList">
<div class="container">
<dir class="row">
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<ol class="example forms" id="myUL">
<li>
<i class=""></i>Customer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Customer A
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer B
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Customer C
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
<li>
<i class=""></i>Teller
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol>
<li>
<i class=""></i>Till Open
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till Close
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Deposit
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Cash Withdrawal
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Till to Till Transfer
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Income Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil"></i>
</a>
<ol></ol>
</li>
<li>
<i class=""></i>Expense Posting
<a href="JavaScript:void(0)" style="visibility: hidden;">
<i class="fa fa-pencil">
</i>
</a>
<ol></ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="col-xs-6">
<h4 class="center">List Available Menu</h4>
<div class="newMenu">
<ol class="example example2 sortable">
</ol>
</div>
</div>
</dir>
</div>
</session>
</form>
</div>
This tiny simple sample snippet helped me achieve my goal.
I hoped this will help for somebody having a problem like this. Thanks.

Bootstrap: template example doesn't work - buttons don't react

I'm trying to make this bootstrap collapsible sidebar template work, but can't. It looks like it's supposed to look, but doesn't react on button presses, even though I've downloaded the "Compiled CSS and Js" from https://getbootstrap.com/docs/4.1/getting-started/download/ and jquery and included it like this:
<html>
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-4.1.3/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-4.1.3/js/jquery-3.3.1.min.js"></script>
<style>style from template</style>
<script>script from template</script>
</head>
<body>
body from template
</body>
</html>
When I click on collapse or on any position on the menu it doesn' react at all, as opposed to the correct reaction one can see in template.
Why does this happend and how to fix it?
EDIT: Real link: https://www.codeply.com/go/3e0RAjccRO/bootstrap-4-collapsing-sidebar-menu

Although your provided link (5th word in question) doesn't point to any starter template. If you're talking about collapsible sidebar as shown in screenshot below:
Then its working for me. All I've done is added missing link for font-awesome css. See the complete code snippet below:
#sidebar .list-group-item {
border-radius: 0;
background-color: #333;
color: #ccc;
border-left: 0;
border-right: 0;
border-color: #2c2c2c;
white-space: nowrap;
}
/* highlight active menu */
#sidebar .list-group-item:not(.collapsed) {
background-color: #222;
}
/* closed state */
#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* open state */
#sidebar .list-group .list-group-item[aria-expanded="true"] {
background-color: #222;
}
#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 5px;
}
/* level 1*/
#sidebar .list-group .collapse .list-group-item {
padding-left: 20px;
}
/* level 2*/
#sidebar .list-group .collapse > .collapse .list-group-item {
padding-left: 30px;
}
/* level 3*/
#sidebar .list-group .collapse > .collapse > .collapse .list-group-item {
padding-left: 40px;
}
#media (max-width:48em) {
/* overlay sub levels on small screens */
#sidebar .list-group .collapse.in, #sidebar .list-group .collapsing {
position: absolute;
z-index: 1;
width: 190px;
}
#sidebar .list-group > .list-group-item {
text-align: center;
padding: .75rem .5rem;
}
/* hide caret icons of top level when collapsed */
#sidebar .list-group > .list-group-item[aria-expanded="true"]::after,
#sidebar .list-group > .list-group-item[aria-expanded="false"]::after {
display:none;
}
}
/* change transition animation to width when entire sidebar is toggled */
#sidebar.collapse {
-webkit-transition-timing-function: ease;
-o-transition-timing-function: ease;
transition-timing-function: ease;
-webkit-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
}
#sidebar.collapsing {
opacity: 0.8;
width: 0;
-webkit-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-property: width;
-o-transition-property: width;
transition-property: width;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-1 pl-0 pr-0 collapse fade show" id="sidebar">
<div class="list-group panel">
<i class="fa fa-dashboard fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 1</span>
<div class="collapse" id="menu1">
Subitem 1
<div class="collapse" id="menu1sub1">
Subitem 1 a
Subitem 2 b
Subitem 3 c
<div class="collapse" id="menu1sub1sub1">
Subitem 3 c.1
Subitem 3 c.2
</div>
Subitem 4 d
Subitem 5 e
<div class="collapse" id="menu1sub1sub2">
Subitem 5 e.1
Subitem 5 e.2
</div>
</div>
Subitem 2
Subitem 3
</div>
<i class="fa fa-film fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 2</span>
<i class="fa fa-book fa-fw"></i> <span class="ml-1 hidden-sm-down"> Item 3 </span>
<div class="collapse" id="menu3">
3.1
3.2
<div class="collapse" id="menu3sub2">
3.2 a
3.2 b
3.2 c
</div>
3.3
</div>
<i class="fa fa-heart fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 4</span>
<i class="fa fa-list fa-fw"></i> <span class="ml-1 hidden-sm-down">Item 5</span>
<i class="fa fa-clock-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-th fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-gear fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-calendar fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-envelope fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-bar-chart-o fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
<i class="fa fa-star fa-fw"></i> <span class="ml-1 hidden-sm-down">Link</span>
</div>
</div>
<main class="col-md-9 col-11 pl-2 pt-2">
<i class="fa fa-navicon fa-2x text-muted"></i>
<div class="page-header">
<h1>Bootstrap 4 Sidebar Menu</h1>
</div>
<p class="lead">A responsive, multi-level vertical accordion.</p>
</main>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Make a navbar turn into a Hamburger push-out/slide-out menu when the screen gets too small

Welp... I'm stuck... again...
(FYI This is my first ever website that I am coding myself (not a template) so don't assume that I know anything.)
I am in the process of making my homepage more mobile / smaller screen sizes freindly. One of the biggest problems is that my navbar is too large on mobile and makes it so that in order to see the full navbar you have to scroll to the right, and this really breaks the website aesthetically. I have tried my best to implement things like flexnav into my website but I haven't been able to succeed in making it:
A. Be a Slide-Out / Push-Out menu on mobile which is triggered by a hamburger menu (which is preferably animated like style 2 in this tutorial: http://callmenick.com/post/animating-css-only-hamburger-menu-icons)
B. Have a TRANSPARENT background for both the hamburger menu and the navbar.
B1. Keep my navbar's color-scheme
C. Switch from the full nav-bar to the hamburger menu when the screen is less than 1200 px wide.
I know that I am asking a lot, but hopefully someone will be able to help me. As I am submitting my code in JSBin it would be really helpful If you could do the same (or if you prefer Codepen or JSFiddle or whatever). And I am sure that this stylish approach to a navbar which adapts to screen size would be appreciated by many people who find themselves in the same situation I do. Also, sorry for the messy code.
JSFBin: http://jsbin.com/jefosiweci/edit?html,css,js,output
Code:
<meta name="robots" content="noindex">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #DAE6EB;
margin: 0px auto
}
.menu {
width: 1200px;
margin: 0px;
margin-bottom: -55px;
opacity: 5;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'industry';
font-size: 18px;
}
.menu a {
transition: all linear 0.15s;
color: #98a1a4;
font-size: 18px;
}
.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
text-decoration: none;
color: #414546;
font-size: 18px;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
}
.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
background: #98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu,
.menu li:active {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #98a1a4B;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 18px;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
font-size: 18px;
}
.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
background: #98a1a4;
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix" data-breakpoint="1200">
<li class="current-item wow fadeInDown"><i class="fa fa-home fa"></i> Lore</li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>

I see that you are already using Bootstrap. Bootstrap makes this very easy for you to do as they have it built in already you just need to use their structure. Below I have put in their navbar structure into your existing code. I have taken out the menu css that you had and added just a couple of lines of css to get you started. You can mess with the css and change it to your liking but it should look almost identical to the setup that you had. In this code the nav will have a class of navbar-default which I have given a background of none and a position of absolute top to keep it at the top of the page and a width of 100%. Inside of it is a navbar-header and a navbar-collapse. In the navbar-header is your menu-hamburger which bootstrap has already styled and given javascript to open at a max-width of 767px. Then the navbar-collapse is where you have your links which I have given a media query style background of transparent black. So when you get to the 767 px it will be hidden until you click on the hamburger. This is all built into Bootstraps framework making it very easy for developers to get started on their sites. I hope this helps. Here is your revised code you should be able to just copy and paste this as is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
.navbar-default {
background:none;
margin:0;
position:absolute;
top:0;
left:0;
width:100%;
border:none;
z-index:1;
}
.navbar-default .navbar-nav>li>a {
font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
background:#98a1a4;
color:#333;
}
#media screen and (max-width: 767px){
.navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>

I'm not sure anyone is going to write the code for you, but we can point you in the right direction. What you are looking for, in terms of specifying different styles at different screen sizes are called media queries. They look like this:
#media screen and (max-width: 1199px) {...}
I have built something very similar to what you are looking for (although mine has probably more than what you are looking for) so if you need a reference on how things work or whatnot, I'll post a link.
http://codepen.io/mhodges44/pen/dGMMOK
You can ignore the angularJS stuff (all of the ng-* in the HTML and the javascript), just focus on the CSS media queries. That should give you a pretty good idea of how it all works and you should be able to apply it to your situation.

Bootstrap - collapsed menu not working

I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>

You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<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 class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li class="dropdown pull-right">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search..."> <span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li> <i class="fa fa-dashboard fa-fw"></i> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.