I have a navbar and a sidebar to the left which I want to collapse to the navbar as a dropdown option in smaller screens. This is what it looks like in bigger screens
When the screen size is small, I want something like this to happen
Here are my codes
HTML body
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-2">
<a class="navbar-brand" href="#">CDR</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid flex-grow-1">
<div class="row h-100">
<!-- Sidebar -->
<!-- Collapse as a navbar dropdown in smaller screens -->
<div class="col-lg-3 col-sm-4 sidebar">
<div class="sidebar-container mt-4 mx-2">
<h4 class="text-capitalize py-2">Subjects</h4>
<ul class="nav flex-column subjects">
<li class="subject" data-subject="mathematics">
<h5 class="subject-title mb-1">Mathematics</h5>
<h6 class="subject-details m-0">
<span class="teacher">Prof X.</span> |
<span class="room">Room 113</span>
</h6>
</li>
<li class="subject" data-subject="science">
<h5 class="subject-title mb-1">Science</h5>
<h6 class="subject-details m-0">
<span class="teacher">Prof Y.</span> |
<span class="room">Room 111</span>
</h6>
</li>
<li class="subject" data-subject="english">
<h5 class="subject-title mb-1">English</h5>
<h6 class="subject-details m-0">
<span class="teacher">Prof Z.</span> |
<span class="room">Room 130</span>
</h6>
</li>
</ul>
</div>
</div>
<!-- Content -->
<div class="col-lg-9 col-sm-8 content-container">
<div class="row h-100">
<div class="col-lg-9 col-md-9 col-sm-12 main-container"></div>
<div class="col-lg-3 col-md-3 d-none d-md-block announcement-container">uwu</div>
</div>
</div>
</div>
</div>
</body>
CSS
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
.sidebar {
border-right: 1px solid var(--light-grey);
}
.subjects {
user-select: none;
}
.subject {
padding: 15px;
cursor: pointer;
border: 1px solid var(--lighter-grey);
border-radius: 5px;
margin-bottom: 5px;
}
.subject-title {
font-size: 0.8rem;
letter-spacing: 2px;
}
.subject-details {
text-transform: capitalize;
color: var(--gray);
letter-spacing: 2px;
}
.active {
font-size: 1rem;
background-color: var(--lighter-grey);
border-left: 4px solid var(--gray);
padding-left: 12px;
}
.content-container {
background-color: var(--content-bg-grey);
}
So far as I've searched, I can't find a way to do this just yet. What would be the proper way to do it? Is there a bootstrap setting that will allow for this or do I need to use JS? I'm also using jQuery if this helps any.
Thanks!
just add this to your html code
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-2">
<a class="navbar-brand" href="#">CDR</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<!-- this will appear only in small screen -->
<li class="nav-item dropdown d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Subjects
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Mathematics</a>
<a class="dropdown-item" href="#">Science</a>
<a class="dropdown-item" href="#">English</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid flex-grow-1">
<div class="row h-100">
<!-- Sidebar -->
<!-- Collapse as a navbar dropdown in smaller screens -->
<!-- i was added two classes (d-md-block d-none) -->
<div class="col-lg-3 col-sm-4 sidebar d-md-block d-none">
<div class="sidebar-container mt-4 mx-2">
<h4 class="text-capitalize py-2">Subjects</h4>
<ul class="nav flex-column subjects">
<li class="subject" data-subject="mathematics">
<h5 class="subject-title mb-1">Mathematics</h5>
<h6 class="subject-details m-0">
<span class="teacher">Prof X.</span> |
<span class="room">Room 113</span>
</h6>
</li>
<li class="subject" data-subject="science">
<h5 class="subject-title mb-1">Science</h5>
<h6 class="subject-details m-0">
<span class="teacher">Prof Y.</span> |
<span class="room">Room 111</span>
</h6>
</li>
<li class="subject" data-subject="english">
<h5 class="subject-title mb-1">English</h5>
<h6 class="subject-details m-0">
<span class="teacher">Prof Z.</span> |
<span class="room">Room 130</span>
</h6>
</li>
</ul>
</div>
</div>
<!-- Content -->
<div class="col-lg-9 col-sm-8 content-container">
<div class="row h-100">
<div class="col-lg-9 col-md-9 col-sm-12 main-container"></div>
<div class="col-lg-3 col-md-3 d-none d-md-block announcement-container">uwu</div>
</div>
</div>
</div>
</div>
Related
I'm trying to create this navbar design, but I also want to maintain the responsiveness, hamburger menu but only for the upper part (home, contact us, etc links)
.red {
background-color: red;
width: 100px;
height: 100px;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
}
.yellow {
background-color: yellow;
width: 100px;
height: 100px;
}
.orange {
background-color: orange;
width: 50px;
height: 50px;
border: 2px solid black;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<div class="red">a</div>
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-menu">
<div class="yellow"></div>
</span>
</button>
<div class="container">
<div class="row">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white active-page fs-2" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Rooms</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Contact us</a>
</li>
</ul>
</div>
</div>
<div class="d-none d-lg-block bg-white p-3">
<!-- Have to make like this, if i put everything in a single div it brakes -->
<div class="row justify-content-md-center">
<div class="col-3 d-flex align-items-center">
<span class="font-SansSerifBldFLFCond text-blue">CALL US NOW</span>
<div class="orange">s</div>
</div>
<div class="col-3 d-flex align-items-center">
<p class="text-blue">From</p>
<div id="today-date ">
<h4 class="fs-6 text-blue">SUNDAY</h4>
<p class="fs-3">15 May</p>
</div>
<div class="orange">s</div>
</div>
<div class="col-3 d-flex align-items-center">
<p class="text-blue">To</p>
<div id="tomorrow-date">
<h4 class="fs-6 text-blue">MONDAY</h4>
<p class="fs-3">16 May</p>
</div>
<div class="orange">s</div>
</div>
<div class="col-3 d-flex align-items-center">
<p class="text-blue font-SansSerifBldFLFCond">INFO</p>
</div>
</div>
</div>
</div>
</div>
</nav>
First main problem is I want to center the links (home, about info)
Second, I want to remove all the padding and margin so the icon (red div) have the same height of the Navbar.
And final thing The height of the 2 columns (links and calendar, phone ecc) should be 50% of the logo each, so combined they have the same height of the logo
I am using Bootstrap 5 within Rails 7 application. I am following Bootstrap's Dashboard example https://getbootstrap.com/docs/5.0/examples/dashboard/ but within my Rails application the navbar-toggler-icon is not displaying (nor does it work) when I shorten the width of the browser window.
I have a CodePen example https://codepen.io/chrisgo-cp/pen/zYPpEPp that shows the code I am using and navbar-toggler-icon is not displaying.
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<!-- <span data-feather="home"></span> -->
Link ?
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file"></span> -->
Link ?
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<!-- <span data-feather="plus-circle"></span> -->
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 2
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<%= yield %>
</main>
</div> <!--/ .row -->
</div> <!--/ .container-fluid -->
Here you go... Remove position-absolute from the <button>.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css' integrity='sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU' crossorigin='anonymous'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.min.js' integrity='sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/' crossorigin='anonymous'></script>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<!-- <span data-feather="home"></span> -->
Link ?
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file"></span> -->
Link ?
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report">
<!-- <span data-feather="plus-circle"></span> -->
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 1
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<!-- <span data-feather="file-text"></span> -->
Report 2
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<%= yield %>
</main>
</div>
<!--/ .row -->
</div>
<!--/ .container-fluid -->
</body>
</html>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand mx-auto"><h2 style="color: white;">Name</h2></div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#burger"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<h2 style="color: white;">Python</h2>
</li>
<li class="nav-item">
<h2 style="color: white;">Name</h2>
</li>
<li class="nav-item">
<h2 style="color: white;">Html&Css</h2>
</li>
</ul>
</div>
</div>
</nav>
<!--Secion One-->
<section class="bg-dark text-light p-5 p-lg-0 text-center text-md-start">
<div class="container">
<div class="row align-items-center text-center">
<h1 class="hi">Design made by the <span style="color: #F23DFF;">youth</span></h1>
</div>
</div>
</section>
</body>
Here is what it looks like right now
!(https://media.discordapp.net/attachments/855988935149486120/896932433319059487/unknown.png?width=609&height=406)
Use flex:
<body class="h-100 d-flex flex-column">
<nav class="navbar navbar-expand-md bg-dark navbar-dark py-3">
<div class="container">
<div class="navbar-brand mx-auto">
<h2 style="color: white">Name</h2>
</div>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#burger">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="burger">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a href="#python" class="nav-link px-3">
<h2 style="color: white">Python</h2>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link px-3">
<h2 style="color: white">Name</h2>
</a>
</li>
<li class="nav-item">
<a href="#html&css" class="nav-link px-3">
<h2 style="color: white">Html&Css</h2>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Secion One-->
<section
class="
d-flex
align-items-center
flex-1
justify-items-center
bg-dark
text-light
p-5 p-lg-0
text-center text-md-start
">
<div class="container">
<div class="row align-items-center text-center">
<h1 class="hi">
Design made by the <span style="color: #f23dff">youth</span>
</h1>
</div>
</div>
</section>
</body>
the only thing you should also note is that the wrapping html might not be taking the full height, so add the following css:
html{
height:100%
}
.flex-1{
flex: 1;
}
I still do not fully understand the flex structure in Bootstrap. I'll put down what I'm trying to do and the codes I've written. In short, what I want to do is add text over the image in the navbar. But the container of the navbar does not allow this. I think it's because I set the containers wrong. Thanks in advance for those who help.
Code:
.navbar-brand {
position: absolute;
width: 100%;
z-index: 3000;
}
.mnav {
height: 123px;
z-index: 2000;
width: 1200px
}
.has-bg-img {
z-index: 2000;
}
<div class="section fixed-top">
<div class="container-fluid bg-dark">
<div class="row p-3 bg-dark mx-auto ">
<div class="container text-light" style="max-width: 1200px">topnav</div>
</div>
</div>
<div class="container-fluid bg-light d-flex shadow-lg">
<nav class="navbar navbar-expand-lg navbar-light bg-light mx-auto mnav">
<div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto h-dark">
<li class="nav-item active ">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link text-dark" href="//codeply.com">Clinic</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
</ul>
</div>
<div class="col-auto mx-auto">
<div class="shadow rounded-circle">
<img src="https://i.imgur.com/swpgs2N.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
</div>
</div>
<div class="mx-5 order-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse collapse w-30 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto h-dark">
<li class="nav-item active ">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Blog</a>
</li>
</ul>
</div>
<div class="row pt-4 d-flex align-items-center">
<div class="col-3 text-white ">
<span class="navbar-toggler-icon"></span>
<h5>Appointment</h5>
<h5>Now !</h5>
<img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
</div>
</div>
</nav>
</div>
</div>
<script src="js/jquery-3.x-git.slim"></script>
<script src="js/bootstrap.min.js"></script>
If the only problem is that your text should be placed over the image, have a look at this article: https://www.w3schools.com/howto/howto_css_image_text.asp
In order to transfer it to your code, you can use the following snippet (I added font-awesome because i am not sure where your icon came from):
.bookmark {
position: relative;
text-align: center;
color: white;
}
.bookmark-texts {
padding: 20px;
position: absolute;
top: 0;
left: 0;
font-size: 18px;
}
.fa {
font-size: 35px !important;
margin-bottom: 5px;
}
.now {
font-style: italic;
font-weight: bold;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="row pt-4 d-flex align-items-center">
<div class="col-3">
<div id="bookmark" class="d-inline-block">
<img src="https://i.imgur.com/4m0eRiP.png" class="img-circle navbar-brand p-0 m-0" alt="marmarasmile-logo">
<div class="bookmark-texts text-center text-white">
<!-- <span class="navbar-toggler-icon"></span> -->
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="appointment">Appointment</div>
<div class="now">Now !</div>
</div>
</div>
</div>
</div>
Also have a look at this fiddle resulting in this:
I am using 'Album' example from Bootstrap 4.1 and unable to get the extra nav-items to display horizontally.
I tried to add 'navbar-expand-lg', and it brings all to horizontal line. But, the toggler-button (and hence its header data) vanishes and becomes inaccessible.
Code as below;
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
Add float: left;CSS to your li items.
Also you can try this
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h
I got the answer.
The navbar was a flexbox with 'd-flex'. So, I added a 'flex-row', which brings nav-items horizontally. 'mr-auto' brings margin properly.
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<!-- Navbar#1 Toggled - Detailed Header Info-->
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4>
<p class="text-muted">Lines of Data Shortened.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<ul class="list-unstyled">
<li>Follow on Twitter</li>
<li>Like on Facebook</li>
<li>Email me</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Navbar#2 Permanent Strip of Navbar -->
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand d-flex align-items-center">
<!-- SVG Album Icon -->
<strong>Album</strong>
</a>
<!-- Nav Items Manually added -->
<div class="navbar-nav flex-row mr-auto">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
<!-- Navbar#3 - Visible Toggle Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>