We Keep Coding

Stack inner anchor tag on top of nav

I have an anchor tag with a hamburger style css that toggles a fly-out menu. The thing I am stuck at is that I always want it to stay on top however at present the flyout menu goes over the anchor hamburger and hides it. The flyout menu has the class called nav-container any help is welcome here as I have tried to solve this for a few hours. Thanks in advance.
HTML -
<div class="container">
<nav id="main-nav" class="hc-nav hc-nav-1">
<ul>
<li class="Test page">
Test page
<ul>
<li class="nav-has-sub">
Sub test page
<ul>
<li>
Sub sub test page
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<a class="toggle">
<span></span>
</a>
</div>
Flyout HTML -
<div class="nav-container" style="">
<div class="nav-wrapper nav-wrapper-0">
<div class="nav-content">
<ul>
<li class="nav-close"><span></span></li>
<li><a class="toggle toggle-open hc-nav-trigger hc-nav-1 nav-item" style="top:-25px;left:10px">
<span></span>
</a>
</li>
</ul>
<ul>
<li class="Test page nav-parent">
<input type="checkbox" id="hc-nav-1-1-0" data-level="1" data-index="0" value="n83m4ogohw-gjximxnm4rq">Test page<span class="nav-next"><label for="hc-nav-1-1-0"></label></span>
<div class="nav-wrapper nav-wrapper-1">
<div class="nav-content">
<h2>Test page</h2>
<ul style="text-indent: 40px;">
<li class="nav-has-sub nav-parent">
<input type="checkbox" id="hc-nav-1-2-0" data-level="2" data-index="0" value="vjoqryeoc9-trdi4kvf59">level 2.1<span class="nav-next"><label for="hc-nav-1-2-0"></label></span>
<div class="nav-wrapper nav-wrapper-2">
<div class="nav-content">
<h2>level 2.1</h2>
<ul style="text-indent: 80px;">
<li>level 3</li>
</ul>
</div>
</div>
</li>
<li>level 2.2</li>
</ul>
</div>
</div>
</li>
</ul>
<ul>
<li class="Another top level">Another top level</li>
</ul>
</div>
</div>
</div>
CSS
.toggle
{
position: absolute;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
top: 20px;
z-index: 9980;
width: 35px;
min-height: 24px;
width: auto;
left: auto;
float: left;
display: block;
cursor: pointer;
box-sizing: content-box;
font-size: 20px;
padding-left: 55px;
line-height: 24px;
margin-top: 0
}
.nav-container {
position: fixed;
z-index: 9998;
top: 0;
width: 350px;
height: auto;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
transition: transform .4s ease;
padding-bottom: 450px;
}

It was a very simple case of giving the class .nav-container a z-index:0
Thanks everyone for posting.

how to show the div that is linked using anchor tag?

I want to show the div that is clicked based on the menu heading and other divs are hidden when the clicked div is shown . I have shown the home div only and rest default in the code .
I tried using
let el = $(this).attr('href');
$(el).toggle();
but its not working perfectly . I want to show the div that is clicked only , home div should be visible by default when no menu is clicked.
.content {
height: 20px;
}
.inactive {
display: none;
}
#home-content {
background-color: red
}
#portfolio-content {
background-color: blue;
}
#about-content {
background-color: yellow;
}
#resume-content {
background-color: green;
}
#contact-content {
background-color: white;
}
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="container">
<div class="content" id="home-content">
</div>
<div class="content inactive" id="about-content">
</div>
<div class="content inactive" id="portfolio-content">
</div>
<div class="content inactive" id="resume-content">
</div>
<div class="content inactive" id="contact-content">
</div>
</div>

Try this
$( ".sidebar-menu-item" ).click(function() {
$(".content").hide();
let el = $(this).attr('href');
$(el).toggle();
});
#home-content {
height: 200px;
background-color: red
}
#portfolio-content {
height: 200px;
background-color: blue;
display: none;
}
#about-content {
height: 200px;
background-color: yellow;
display: none;
}
#resume-content {
height: 200px;
background-color: green;
display: none;
}
#contact-content {
height: 200px;
background-color: white;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="sidebar-menu-container">
<li>
<a class="sidebar-menu-item" href="#home-content">Home</a>
</li>
<li>
<a class="sidebar-menu-item" href="#about-content">About Me</a>
</li>
<li>
<a class="sidebar-menu-item" href="#resume-content">Resume</a>
</li>
<li>
<a class="sidebar-menu-item" href="#portfolio-content">Portfolio</a>
</li>
<li>
<a class="sidebar-menu-item" href="#contact-content">Contact</a>
</li>
</ul>
<div class="content" id="home-content">
home-content
</div>
<div class="content" id="about-content">
about-content
</div>
<div class="content" id="portfolio-content">
portoflio-content
</div>
<div class="content" id="resume-content">
resume-content
</div>
<div class="content" id="contact-content">
contact-content
</div>

Nevermind, this worked for me:
$('.sidebar-menu-item').click(function () {
let href = $(this).attr('href');
$(".content").addClass("inactive");
$(href).removeClass("inactive");
});

Arrow pointing to the correct direction when click expan/collapse all

I did the "expand/collapse all" function, everything is working well, except the arrow. It doesn't pointing to the correct direction. I'm not sure how to do that, so I leave it empty on my code. My issue is shown below.
(Red box represents the click action)
Click "View all", can see the expanders are opened. The arrows pointing down.
Click "A" to collapse the expander, and the arrow pointing up.
Click "Collapse all", the expanders are collpased. Now you can see my problem, "A" arrow is pointing up and the rest are pointing down.
Hoping that some of you could provide me with some advice. Thanks!
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

Just add $('.mobexpand').addClass('collapsed'); ($(".expandall").click) in show all function
and $('.mobexpand').removeClass('collapsed'); ($(".collapseall").click) and in collsapse all function as bellow
$(".aq_epdtitle").click(function() {
$('.aq_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle1").click(function() {
$('.aq_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".aq_epdtitle2").click(function() {
$('.aq_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".expandall").click(function() {
$('.aq_expandct').slideDown().toggleClass('active');
$('.aq_expandct1').slideDown().toggleClass('active');
$('.aq_expandct2').slideDown().toggleClass('active');
$('.mobexpand').removeClass('collapsed');
});
$(".collapseall").click(function() {
$('.aq_expandct').slideUp().removeClass('active');
$('.aq_expandct1').slideUp().removeClass('active');
$('.aq_expandct2').slideUp().removeClass('active');
$('.mobexpand').addClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.aq_expandct, .aq_expandct1, .aq_expandct2 {
display: none;
padding : 5px;
}
.aq_epdtitle, .aq_epdtitle1, .aq_epdtitle2{
background:#ccc url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position:right 0px;
cursor:pointer;
padding: 0 10px;
margin: 10px 0;
}
.collapsed .aq_epdtitle, .collapsed .aq_epdtitle1, .collapsed .aq_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="expandall">View all</div>
<div class="collapseall">Collapse all</div>
<ul>
<li class="mobexpand collapsed">
<div class="aq_epdtitle">A</div>
<ul class="aq_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="aq_epdtitle1">B</div>
<ul class="aq_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="aq_epdtitle2">C</div>
<ul class="aq_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>

expand and collapse icon in jQuery tree view is not shown in tree

I designed jQuery tree view using this web page. I changed this code little bit more.I removed the content of ' div class="tree" ' and add its content as follows.
<div class="tree">
<ul id="list">
<div id="1">
<li id="li_1"><a>2015/01/01 08:00:00</a>
<ul id="ul_1">
<div id="1_1"><li id="start"><a>2015/01/01 08:10:05 </a></li></div>
<div id="1_2"><li id="T"><a>2015/01/01 08:15:10</a></li></div>
<div id="1_3"><li id="start"><a>2015/01/01 08:27:15</a></li></div>
<div id="1_4"><li id="F"><a>2015/01/01 08:39:20</a></li></div>
<div id="1_5"><li id="start"><a>2015/01/01 08:46:25</a></li></div>
<div id="1_6"><li id="F"><a>2015/01/01 08:55:30</a></li></div>
</ul>
</li>
</div>
<div id="2">
<li id="li_2"><a>2015/01/01 10:20:00 </a>
<ul id="ul_2">
<div id="2_1"><li id="start"><a>2015/01/01 10:28:09</a></li></div>
<div id="2_2"><li id="F"><a>2015/01/01 10:37:20</a></li></div>
<div id="2_3"><li id="start"><a>2015/01/01 10:45:13</a></li></div>
<div id="2_4"><li id="F"><a>2015/01/01 10:48:26</a></li></div>
<div id="2_5"><li id="start"><a>2015/01/01 10:57:54</a></li></div>
<div id="2_6"><li id="T"><a>2015/01/01 11:12:00</a></li></div>
<div id="2_7"><li id="start"><a>2015/01/01 11:20:09</a></li></div>
<div id="2_8"><li id="F"><a>2015/01/01 11:28:12</a></li></div>
</ul>
</li>
</div>
</ul>
</div>
Tree view is worked successfully. But the expand/collapse icon(plus_minus icon) is not shown.Where am I wrong? Thanks for advices.

css looks for anchor under li of that ul but you inserted div there.that's why its not showing icon
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none
icon's class>>
.tree li.parent > a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;

Finally I found the solution.(Nishith Chaturvedi's advice is helpfull for me to build this answer.) First I changed the changing code little bit more again as follows.. :)
.tree > .listClass > .testSuite > .testSuite_branch >a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree > .listClass > .testSuite > .testSuite_branch >a:before {
background-image: url("../images/plus_minus_icons.png");
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
<div class="tree">
<ul id="list" class="listClass">
<div tabindex="-1" id="1" class="testSuite">
<li id="li_1" class="testSuite_branch"><a>2015/01/01 08:00:00 </a>
<ul id="ul_1">
<div id="1_1"><li id="start"><a>2015/01/01 08:10:05</a></li></div>
<div id="1_2"><li id="T"><a>2015/01/01 08:15:10</a></li></div>
<div id="1_3"><li id="start"><a>2015/01/01 08:27:1</a></li></div>
<div id="1_4"><li id="F"><a>2015/01/01 08:39:2</a></li></div>
<div id="1_5"><li id="start"><a>2015/01/01 08:46:25</a></li></div>
<div id="1_6"><li id="F"><a>2015/01/01 08:55:30</a></li></div>
</ul>
</li>
</div>
</ul>
</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.