Mark Mark - 7 days ago 5
CSS Question

Navigation bar in Bootstrap 4

Working on Vertical Navigation bar found here:
Codeply

My code is the following:

<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;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
content: "";
display: table;
}

.wrapper:after,
.column:after {
clear: both;
}

#sidebar {
background-color: #eee;
padding-left: 0;
float: left;
min-height: 100%;
}

#sidebar .collapse.in {
display: inline;
}

#sidebar > .nav > li > a {
white-space: nowrap;
overflow: hidden;
}

#main {
padding: 15px;
left: 0;
}

/*
* off canvas sidebar
* --------------------------------------------------
*/
@media screen and (max-width: 768px) {
#sidebar {
min-width: 44px;
}

#main {
width: 1%;
left: 0;
}

#sidebar .visible-xs {
display: inline !important;
}

.row-offcanvas {
position: relative;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.row-offcanvas-left.active {
left: 45%;
}

.row-offcanvas-left.active .sidebar-offcanvas {
left: -45%;
position: absolute;
top: 0;
width: 45%;
}
}


@media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}

.row-offcanvas-left.active {
left: 3%;
}

.row-offcanvas-left.active .sidebar-offcanvas {
left: -3%;
position: absolute;
top: 0;
width: 3%;
text-align: center;
min-width: 42px;
}

#main {
left: 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>
<li><a href="#"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Stories</span></a></li>
<li><a href="#"><i class="fa fa-paperclip"></i> <span class="collapse in hidden-xs">Saved</span></a></li>
<li><a href="#"><i class="fa fa-refresh"></i> <span class="collapse in hidden-xs">Refresh</span></a></li>
<li>
<a href="#" data-target="#item1" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a>
<ul class="nav nav-stacked collapse left-submenu" id="item1">
<li><a href="google.com">View One</a></li>
<li><a href="gmail.com">View Two</a></li>
</ul>
</li>
<li>
<a href="#" data-target="#item2" data-toggle="collapse"><i class="fa fa-list"></i> <span class="collapse in hidden-xs">Menu <span class="caret"></span></span></a>
<ul class="nav nav-stacked collapse" id="item2">
<li><a href="#">View One</a></li>
<li><a href="#">View Two</a></li>
<li><a href="#">View Three</a></li>
</ul>
</li>
<li><a href="#"><i class="glyphicon glyphicon-list-alt"></i> <span class="collapse in hidden-xs">Link</span></a></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>


Fiddle

I am not getting the same functionality. My code doesn't show carets for menu dropdowns. Also All menu items have a hyperlink mouseover effect while the original sample does not have it.
Can someone help me to understand what I am doing wrong?

Thanks

Answer

you just need to change the version of bootstrap to 3.7.7 which is the stable one

use this links instead

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css