"Bootstrap 4 Navbar w/ Sidebar"
Bootstrap 4.0.0 Snippet by blayderunner123

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- jQuery Easing API -->
<body data-spy="scroll" data-target="#navbarResponsive" data-offset="51">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-toggleable-md" id="navbarResponsive">
<a class="navbar-brand" href="#">BS <strong>Hover Sidebar</strong></a>
<br class="hidden-lg-up">
<br class="hidden-lg-up">
<ul class="nav navbar-nav hidden-lg-up">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about" title="Go to About Us section">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#resume" title="Navigate to Jonathan Adcox IT Resume">Resume</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills" title="Navigate to 'Our Services' section">Skills</a>
</li>
</ul>
<ul class="nav navbar-nav hidden-md-down float-lg-right">
<li class="nav-item">
<button id="menu-toggle" href="#" class="navbar-toggler float-lg-right toggle" type="button" data-toggle="collapse" data-target="#sidebar-wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle navigation"></button>
</li>
</ul>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" type="button" class="btn btn-danger close hidden-lg-up float-xs-right toggle" data-dismiss="sidebar-wrapper" aria-label="Close"></a>
<li class="sidebar-brand">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Global Styles */
*, *:before, *:after{
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
body{
width: 100%;
height: 100%;
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
overflow-x:hidden;
margin-top:3.5em;
position: relative;
}
html {
position: relative;
min-height: 100%;
width: 100%
}
h1,
h2,
h3,
h4,
h5,
h6{
margin: 0 0 35px;
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 800;
letter-spacing: 1px;
}
.row{
position:relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function()
{
// Closes the sidebar menu on menu-close button click event
$("#menu-close").click(function(e) //declare the element event ...'(e)' = event (shorthand)
{
// - will not work otherwise")
$("#sidebar-wrapper").toggleClass("active"); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
/*!
======================= Notes ===============================
* see: .sidebar-wrapper.active in: style.css
==================== END Notes ==============================
*/
}); //Close 'function()'
// Open the Sidebar-wrapper on Hover
$("#menu-toggle").hover(function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
});
$("#menu-toggle").bind('click',function(e) //declare the element event ...'(e)' = event (shorthand)
{
$("#sidebar-wrapper").toggleClass("active",true); //instead on click event toggle active CSS element
e.preventDefault(); //prevent the default action ("Do not remove as the code
}); //Close 'function()'
$('#sidebar-wrapper').mouseleave(function(e) //declare the jQuery: mouseleave() event
// - see: ('//api.jquery.com/mouseleave/' for details)
{
/*! .toggleClass( className, state ) */
$('#sidebar-wrapper').toggleClass('active',false); /* toggleClass: Add or remove one or more classes from each element
in the set of matched elements, depending on either the class's
presence or the value of the state argument */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard React
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
sidebar.rtl
Bootstrap 4 Navbar with Icon Top

Questions / Comments: