Currently tackling the Vertical Navigation bar which can be found at this location: Codeply
This is my code snippet:
<html>
<body>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<style>
html, body {
height: 100%;
}
.wrapper, .row {
height: 100%;
margin-left: 0;
margin-right: 0;
}
...
</style>
<script>
$('[data-toggle=offcanvas]').click(function () {
$('.row-offcanvas').toggleClass('active');
$('.collapse').toggleClass('in').toggleClass('hidden-xs').toggleClass('visible-xs');
});
</script>
<div class="wrapper">
<div class="row row-offcanvas row-offcanvas-left">
<!-- sidebar -->
<div class="column col-sm-3 col-xs-1 sidebar-offcanvas" id="sidebar">
<ul class="nav" id="menu">
<li><a href="#"><i class="fa fa-list-alt"></i> <span class="collapse in hidden-xs">Link 1</span></a></li>
...
</ul>
</li>
</ul>
</div>
<!-- /sidebar -->
<!-- main right col -->
<div class="column col-sm-9 col-xs-11" id="main">
<p><a href="#" data-toggle="offcanvas"><i class="fa fa-navicon fa-2x"></i></a></p>
<p>
Main content...
</p>
</div>
<!-- /main -->
</div>
</div>
</body>
</html>
Having issues with the functionality in my code. The caret for menu dropdowns is not displaying, and all menu items have a hyperlink mouseover effect unlike the original example. Any assistance in identifying my mistakes would be greatly appreciated.
Thank you