I'm working to edit some content for this Bootstrap theme: http://startbootstrap.com/template-overviews/sb-admin-2/
When I delete some content from the index.html file the left side bar navigation menu has been expanded and didn't collapse again.
Here is the edited index.html code:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="css/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Timeline CSS -->
<link href="css/plugins/timeline.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/sb-admin-2.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="css/plugins/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-3 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">26</div>
<div>New Comments!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">12</div>
<div>New Tasks!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">124</div>
<div>New Orders!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="panel panel-red">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-support fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge">13</div>
<div>Support Tickets!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="js/plugins/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="js/plugins/morris/raphael.min.js"></script>
<script src="js/plugins/morris/morris.min.js"></script>
<script src="js/plugins/morris/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/sb-admin-2.js"></script>
</body>
</html>
You have to remove <script src="js/plugins/morris/morris-data.js"></script> from the bottom of your index.html.
This file contains sample data from the demo preview. Since you removed these graph div containers, the script throws an error as it can't find the container. This error stops the script execution and therefore the metis-menu script doesn't work anymore.
I almost went crazy.
Check the file sb-admin-2.js
end of the file:
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
commented only that part of the code
/* */
Related
I have two nav bars, one of the nav bar has a red background and the other nav bar has blue background with multiple anchor tags.
When I reduce the screen, the second nav bar is not displaying correctly when compared to before. Can anyone help me with your best solution?
Please find issue image,
Please find my code below,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" type="text/css" href="CSS/Header.css">
<link rel="stylesheet" type="text/css" href="CSS/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>
After I try this code without header.css and styles.css
No have problem with your code
I will shared snippet on here
Please give the Header.css and Styles.css in here
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class=" navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active mt-auto mb-auto col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item mt-auto mb-auto col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</Div>
</nav>
</header>
</body>
</html>
EDIT - By removing all my previous answer
You are facing this issue because there are too many items in your nav. So the width is too big.
You can consider updating the navbar-expand-sm class to navbar-expand-md in order to change the breakpoint on which you want the menu collapsing under the "burger menu".
Otherelse, you can hide menu texts when the screen is small, and add those texts into the title properties of your icons or its wrappers to see the "menu description" on hover.
Moreover, mt-auto mb-auto col classes for each <li></li> are not needed. In fact, margin / padding should be added only on the wrapper. And the navbar classes automatically arrange your items. The col onto your items are breaking the responsiveness of your nav wrapper.
Keep col but updating nav to navbar-expanded-md:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-md container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item col active">
<a class="nav-link navicon" href="Start.html">
<div class="icon-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="icon-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Consents.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Purpose.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Personal.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Assets.html">
<div >
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Declarations.html">
<div >
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Income.html">
<div >
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item col">
<a class="nav-link navicon" href="Preview.html">
<div >
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
Removing col but Keeping nav to navbar-expanded-sm:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.3.1.js"></script> -->
</head>
<body>
<header>
<nav class=" navbar navbar-expand-sm navbar-dark navbar-custom" style="background-image:header.png;opacity:0.5;height:12vh;background-color: red"></nav>
<nav class="navbar navbar-expand-sm container-fluid " style="background-color: #01adcd;">
<!-- <a class="navbar-brand" href="#">Start</a> -->
<!-- <div class="collapse navbar-collapse" id="navbarText"> -->
<!-- Collapse button -->
<button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"
aria-controls="navbarSupportedContent1" aria-expanded="false" aria-label="Toggle navigation"><span class="dark-blue-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1" >
<ul class="navbar-nav mx-auto order-0" style=" background-color: #01adcd;">
<li class="nav-item active">
<a class="nav-link navicon" href="Start.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Start
</div>
<div class="text-center " >
<i class="far fa-check-circle"></i>
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Consents.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Stop
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Purpose.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
gallery
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Personal.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
About
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Assets.html">
<div class="text-center">
<i class="fa fa-envelope"></i>
</div>
<div >
Assets
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Declarations.html">
<div class="text-center">
<i class="fa fa-user"></i>
</div>
<div >
Features
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Income.html">
<div class="text-center">
<i class="fa fa-cog"></i>
</div>
<div >
Source
</div>
</a>
</li>
<li class="nav-item">
<a class="nav-link navicon" href="Preview.html">
<div class="text-center">
<i class="fa fa-home"></i>
</div>
<div >
Careers
</div>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
</html>
On this second snippet, I added the class text-center to your icon wrappers.
I am trying to put my card next to my navigation that is vertical, but it decides that it needs to go under. So how can I fix this solution? I've been spending hours on trying to fix this problem
Work:
<?php include 'includes/db.php'?>
<html>
<head>
<title>Admin Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<?php include 'includes/header.php';?>
<div class="col-lg-2">
<ul class="nav flex-column">
<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
<ul class="collapse" id="new-items">
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
</ul>
</li>
<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
</ul>
</div>
<br/>
<div class="col-lg-8">
<div style="width:50px;height:50px;"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<footer></footer>
</body>
</html>
If anyone can figure this out, it will be greatly appreciated Please also note that this is an administrator panel for a blog I am making (Custom CMS) so if you have any ideas on that as well, I will greatly appreciate it.
You could acheive this by Using css floating styles. I add a custom classes for both navigation and cards div and apply float:left property for both divs. Break(br) tag is removed. Immediate first child of card is empty, hence I made it to invisible.
Another method you can use float-left css classes for acheiving float:left css properties in both divs.
Please find the code below.
<html>
<head>
<title>Admin Panel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="../bootstrap/fonts/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<style>
.Cls_navigation,.Cls_card{float:left}
.Cls_card > div:first-child{display:none;}
</style>
</head>
<body>
<?php include 'includes/header.php';?>
<div class="col-lg-2 Cls_navigation">
<ul class="nav flex-column">
<li><a class="nav-link" href="#"><i class="fa fa-tachometer"></i> Dashboard</a></li>
<li><a class="nav-link" href="#new-items" data-toggle="collapse"><i class="fa fa-plus"></i> New</a>
<ul class="collapse" id="new-items">
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-pencil"></i> New Post</a></li>
<li class="nav-link"><a class="" href="#" style="text-decoration:none;"><i class="fa fa-edit"></i> New Category</a></li>
</ul>
</li>
<li><a class="nav-link" href="#"><i class="fa fa-list"></i> Posts</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-tasks"></i> Categories</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-comment"></i> Comments</a></li>
<li><a class="nav-link" href="#"><i class="fa fa-user"></i> Profile</a></li>
</ul>
</div>
<div class="col-lg-8 Cls_card">
<div style="width:50px;height:50px;"></div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
<div class="card">
<div class="card-header">
<div class="card-block">
<div class="col-xs-3 float-left"><i class="fa fa-signal" style="font-size:5em"></i></div>
<div class="col-xs-9 float-right">
<div style="font-size:2.5em">20</div>
<div style="">Posts</div>
</div>
</div>
</div>
<a href="#">
<div class="card-footer">
<div class="float-left">View Posts</div>
<div class="float-right"><i class="fa fa-arrow-circle-right"></i></div>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<footer></footer>
</body>
My roommate went to turn in his project, and suddenly only the CSS for his body tag still worked (along with the Bootstrap stuff).
If I open up the inspector on the webpage, it doesn't show any of the CSS and if I change any inside the Sublime file it won't show the changes (except for the body tag).
<!DOCTYPE html>
<html>
<head>
<title>Siege Strategies</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="./css/master1.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><i class="fa fa-home" aria-hidden="true"></i></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Settings <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-gamepad" aria-hidden="true"></i> Console</li>
<li> <i class="fa fa-laptop" aria-hidden="true"></i> PC</li>
<li> <i class="fa fa-headphones" aria-hidden="true"></i> Audio</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Loadout <span class="caret"></span>
<ul class="dropdown-menu">
<li> <i class="fa fa-wrench" aria-hidden="true"></i> Attachments</li>
<li> <i class="fa fa-shield" aria-hidden="true"></i> Gadgets</li>
</ul>
</li>
</ul>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Strategy <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-users" aria-hidden="true"></i> Team Strategy</li>
<li> <i class="fa fa-street-view" aria-hidden="true"></i> Individual Strategy</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<a href="pages/tachanka.html">
<img src="images/tachanka.png" alt="Chania">
<div class="carousel-caption">
<h3>New Tachanka Spots
</h3>
</div>
</a>
</div>
<div class="item">
<a href="pages/jager.html">
<img src="images/jager.png" alt="Chania">
<div class="carousel-caption">
<h3>Roaming Guide</h3>
</div>
</a>
</div>
<div class="item">
<a href="pages/blackbeard.html">
<img src="images/blackbeard.png" alt="Flower">
<div class="carousel-caption">
<h3>Blackbeard Tactics</h3>
</div>
</a>
</div>
<div class="item">
<a href="pages/sledge.html">
<img src="images/sledge.png" alt="Flower">
<div class="carousel-caption">
<h3>Sledge Rushing Stats</h3>
</div>
</a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<!-- Marketing Icons Section -->
<div class="row">
<div class="col-sm-6" id="contact">
<div class="panel panel-default panelsBoy">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-envelope"></i> Contact Us</h4>
</div>
<div class="panel-body" id="contactus">
<i class="fa fa-facebook-official" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-twitch" aria-hidden="true"></i>
<i class="fa fa-reddit" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-sm-6" id="weekly">
<div class="panel panel-default panelsBoy">
<div class="panel-heading">
<h4><i class="glyphicon glyphicon-calendar" aria-hidden="true"></i> Weekly Strategy</h4>
</div>
<div class="panel-body" id="homebody">
<p>Sign up for the weekly strategy newsletter so you can improve your skills!</p>
<div class="row" id="button">
<div class="col-sm-6">
<button class="btn btn-default" type="button">Sign Up</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Try clearing the browser cache and make sure you have correct path mentioned <link rel="stylesheet" type="text/css" href="css/master1.css">
I am quite new to bootstrap and I was wondering if anyone could give some advice as to how I would be able to place my navbar underneath my header. This is my current code for the two:
Header:
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
Navbar:
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Any kind suggestions and tips would be greatly appreciated. I am also fairly new to programming so good explanations go along way! =)
Just change
navbar-fixed-top
to
navbar-top
Edit for the second answer:
Change your to
<nav id="myNav" class="navbar navbar-default" role="navigation">
And you will need to add jquery reference and this little script.
var headerHeight = 200;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > headerHeight) {
$('#myNav').removeClass('navbar-top');
$('#myNav').addClass('navbar-fixed-top');
} else {
$('#myNav').removeClass('navbar-fixed-top');
$('#myNav').addClass('navbar-top');
}
});
Basically what this does is checks how much you have scrolled from top and when you pass your header height it fixes the nav to stay on top. You just need to change the headerHeight value to your header height.
<!DOCTYPE html>
<html >
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
.navbar-fixed-top{
position:static;
}
</style>
</head>
<body>
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>HOST</h1>
<h3>two is better than one</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand topnav" href="/">Host</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Login
</li>
<li>
Sign up
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</body>
</html>
I am using Admin Panel it works fine when I am using it without some modification.
But when I make some changes like removing page-wrapper div inside the wrapper div, I am not able to use the dropdown feature and all collapsing links are active by default.
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-user fa-fw"></i> User Profile
</li>
<li><i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Charts<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Flot Charts
</li>
<li>
Morris.js Charts
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i> Tables
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>
<!-- /#wrapper -->
Where am I missing something?
Here is how it looks like.