When using only CSS, the .nav-main:before{} element is displayed, but with jQuery, it does not toggle that element and always keeps it hidden.
Disclaimer: This issue has been observed on mobile devices (tested in Android Chrome).
jQuery
$('.menu-toggle').click(function() {
$('.nav-main').slideToggle(100);
$(this).toggleClass('current');
});
SCSS
.nav-main{
@include breakpoint(max-desktop){
position: absolute;
top: 100%;
left: 0;
min-width: 30%;
width: auto;
display: block;
z-index: 9999;
padding:1px;
background-color: $peter-river;
box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.15);
&:before{
position: absolute;
left: 20px;
top: -13px;
content: "";
display: block;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-bottom: 13px solid $peter-river;
}
}
}