transparent arrow underneath a clicked element - html

Question

I cant figure out how to make this transparent arrow to work when the link is ".active"
I created a bar underneath the navigation so the arrow could be transparent with the background, but I don't know how to make it be underneath the ".active" link when you click on it, any ideas to make the transparent arrow to work and be underneath the clicked element?
jsfiddle(please make the screen bigger because it's got media queries)
HTML
body {
background-image: url("http://www.crystalxp.net/galerie/img/th_13740.jpg");
}
#logo {
padding: 10px;
max-width: 210px;
display: inline-block;
margin: 5px auto 0 auto;
}
#media (min-width: 720px) {
#logo {
display: block;
float: left;
height: 54px;
max-width: auto;
width: 210px;
margin: 0px 5px 5px 5px;
padding: 0;
}
}
// header container
.header-container {
width: 100%;
background-color: #252525;
background-color: rgba(37, 37, 37, 0.97);
z-index: 2;
-webkit-box-shadow: 0 1px 4px 0 rgba(100, 100, 100, 0.7);
-moz-box-shadow: 0 1px 4px 0 rgba(100, 100, 100, 0.7);
box-shadow: 0 1px 4px 0 rgba(100, 100, 100, 0.7);
}
.nav-actions {
display: none;
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#media (min-width: 720px) {
.nav-actions {
display: block;
}
}
.nav-actions li {
float: left;
}
#media (min-width: 720px) {
.nav-actions li {
margin-left: 10px;
}
}
#media (min-width: 960px) {
.nav-actions li {
margin-left: 20px;
}
}
.nav-actions li a:link,
.nav-actions li a:visited {
padding: 4px 20px;
display: block;
margin-top: 13px;
text-transform: uppercase;
font-weight: 600;
font-size: 16px;
text-decoration: none;
color: #e49e02;
border: 2px solid #e49e02;
}
.nav-actions li a:hover,
.nav-actions li a:active {
border: 2px solid #ffffff;
color: #ffffff;
}
.nav-actions li a.active {
text-decoration: underline;
}
.nav-list {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
margin: 0;
float: left;
padding: 0 0 0 0px;
display: none;
}
.nav-list li {
display: block;
float: left;
margin: 0;
}
.nav-list li:last-child {
margin-right: 0px;
}
#media (min-width: 720px) {
.nav-list {
display: block;
}
}
.nav-list li {
float: left;
}
.nav-list li a:link,
.nav-list li a:visited {
display: block;
color: #e49e02;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
}
#media (min-width: 720px) {
.nav-list li a:link,
.nav-list li a:visited {
padding: 15px 10px;
font-size: 0.85em;
}
}
#media (min-width: 960px) {
.nav-list li a:link,
.nav-list li a:visited {
padding: 15px 30px;
font-size: 1.3em;
}
}
.nav-list li a:hover,
.nav-list li a:active {
color: #ffffff;
}
.nav-list li a.active {
color: red;
}
.nav-list li a.active:after,
.nav-list li a.active:before {
content: '';
position: absolute;
top: 62px;
width: 56%;
padding-bottom: inherit;
background-color: rgba(37, 37, 37, 0.97);
}
.nav-list li a.active:before {
right: 49%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
}
.nav-list li a.active:after {
left: 53%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
}
<!--- header container --->
<header class="header-container">
<div class="header-container--inner">
<!--- site logo --->
<a href="/">
<img id="logo" src="http://placehold.it/100x50">
</a>
<!--- main nav --->
<ul class="nav-list">
<li>entries
</li>
<li><a class="" href="">event</a>
</li>
<li><a class="active" href="">store</a>
</li>
<li>archive
</li>
</ul>
<!--- main nav actions --->
<ul class="nav-actions">
<li>enter
</li>
</ul>
<!--- mobile nav link --->
<div class="small-navigation">
<a href="">
<i class="fa fa-bars"></i>
</a>
</div>
</div>
</header>
<!--- main wrapper --->
<div class="main-wrapper">
<!--- main container --->
<div class="main-container">