CSS

div#shiftnav-main .shiftnav-sub-always > .sub-menu {
display: none;
}

div#shiftnav-main .shiftnav-sub-always > a {
width: 80%;
}

div#shiftnav-main .customToggle {
display: inline-block;
width: 20%;
text-align:center;
line-height: 300%;
padding:6px 0;
border-bottom: 1px solid #111;
border-top: 1px solid #313131;
transition: 500ms ease;
background:url('/wp-content/uploads/2016/12/circle-down-white.png');
background-position:center center;
background-repeat:no-repeat;
}

div#shiftnav-main .shiftnav-sub-always:hover a {background:initial;}

div#shiftnav-main .shiftnav-sub-always:hover {
background: #447F88;

}
div#shiftnav-main .shiftnav-sub-always:hover > span {
border-top-color: rgba(255,255,255,.4);
border-bottom-color: rgba(0,0,0,.8);
}

div#shiftnav-main ul.shiftnav-menu .shiftnav-sub-always > .shiftnav-target {
display: inline-block !important;
}

div#shiftnav-main .customToggle.active + .sub-menu {
display:block
}

div#shiftnav-main .customToggle.active {
transform: rotate(90deg);
border-radius: 50%;
border-left-color: rgba(255,255,255,.4);
border-right-color: rgba(0,0,0,.8);
}

jQuery
<script>
$(function(){
$('.shiftnav-sub-always > a').after('<span class="customToggle">&nbsp;</span>');

$('.customToggle').click(function() {
var $this = $(this);

if ($this.hasClass('active')) {
$this.removeClass('active');
} else {
$this.addClass('active');
}
});

});
</script>

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.