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.
Related
I'm trying to find a way to have 3rd level menus in the side bar for my AdminLTE (V3.1.0) portal. Basically i'm trying to achieve something like below:
<ul id="sidebarTree" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-address-book"></i>
<p>
LEVEL 1 ITEM
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link" id="level2item">
<i class="nav-icon far fa-circle"></i>
<p>LEVEL 2 ITEM/p>
</a>
</li>
<a href="#" class="nav-link">
<i class="nav-icon fas fa-address-book"></i>
<p>
LEVEL 2 ITEM - EXPANDABLE
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link" id="level3item">
<i class="nav-icon far fa-circle"></i>
<p>LEVEL 3 ITEM/p>
</a>
</li>
</ul>
</ul>
</li>
Does anyone have any idea how this can be done? Or can this even be done at all?
See here (https://adminlte.io/docs/3.1//components/main-sidebar.html) for how the sidebar looks like in their docs.
Yes it is possible, all you have to do is add the class name nav-item to the parent li.
li > ul {
margin-left: 25px;
}
<link rel="stylesheet" href="https://adminlte.io/docs/3.1//assets/css/adminlte.min.css">
<ul id="sidebarTree" class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-address-book"></i>
<p>
LEVEL 1 ITEM
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link" id="level2item">
<i class="nav-icon far fa-circle"></i>
<p>LEVEL 2 ITEM</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-address-book"></i>
<p>
LEVEL 2 ITEM - EXPANDABLE
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link" id="level3item">
<i class="nav-icon far fa-circle"></i>
<p>LEVEL 3 ITEM</p>
</a>
</li>
</ul>
</li>
</ul>
</li>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/docs/3.1//assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="/docs/3.1//assets/js/adminlte.min.js"></script>
Note: Stackoverflow restricts some imports here you can view it in my codepen below
Working example here: https://codepen.io/Ev1ltw1n/pen/rNzOoob
I have a menu item, having submenus, which I want to put in another menu item. That is as multilevel sidebar items. But there is overlapping as seen on the following image. How can it be fixed?
I expect XYZ, A,B, and C. to shift toward bottom.
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<div id="theModal" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-swatchbook"></i>
<p>
Servis
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="serviceorder" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
Q
</p>
</a>
</li>
<li class="nav-item">
<a href="vehicleinservice" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>
W
</p>
</a>
</li>
<li class="nav-item">
<a href="servicehistory" class="nav-link">
<i class="nav-icon far fa-image"></i>
<p>
P
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="vehicleinservice" class="nav-link" #onclick="OnVehicleInServiceClick">
<i class="nav-icon fas fa-edit"></i>
<p>
Has-a-submenu-list
<span class="badge badge-info right">#vehicleInServiceCount.VehicleInServiceCount</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="takingintoservice" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>111111111r</p>
<span class="badge badge-info right">#vehicleInServiceCount.TakingIntoServiceCount</span>
</a>
</li>
<li class="nav-item">
<a href="inmaintenance" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>222222222</p>
<span class="badge badge-info right">#vehicleInServiceCount.InMaintenanceCount</span>
</a>
</li>
<li class="nav-item">
<a href="waitingsparepart" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>3333333333</p>
<span class="badge badge-info right">#vehicleInServiceCount.WaitingSparePartCount</span>
</a>
</li>
<li class="nav-item">
<a href="readytodeliver" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>4444444</p>
<span class="badge badge-info right">#vehicleInServiceCount.ReadyToDeliveryCount</span>
</a>
</li>
<li class="nav-item">
<a href="delivered" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>55555555</p>
<span class="badge badge-info right">#vehicleInServiceCount.DeliveredCount</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a href="customercard" class="nav-link">
<i class="nav-icon fas fa-user-tie"></i>
<p>
XYZ
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="invoice" class="nav-link">
<i class="nav-icon fas fa-layer-group"></i>
<p>
A
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="stockcard" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A1</p>
</a>
</li>
<li class="nav-item">
<a href="stocksale" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A2</p>
</a>
</li>
<li class="nav-item">
<a href="stockpurchase" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>A3</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="invoice" class="nav-link">
<i class="nav-icon fas fa-receipt"></i>
<p>
B
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="invoiceinbound" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>B1</p>
</a>
</li>
<li class="nav-item">
<a href="invoiceoutbound" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>B2</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tools"></i>
<p>
C
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="safeaccount" class="nav-link">
<i class="fas fa-lira-sign nav-icon"></i>
<p>C1</p>
</a>
</li>
<li class="nav-item">
<a href="staff" class="nav-link">
<i class="fas fa-industry nav-icon"></i>
<p>C2</p>
</a>
</li>
<li class="nav-item">
<a href="users" class="nav-link">
<i class="fas fa-users nav-icon"></i>
<p>C3</p>
</a>
</li>
<li class="nav-item">
<a href="firminfo" class="nav-link">
<i class="fas fa-industry nav-icon"></i>
<p>C4</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
The overlap happens as the li elements you expand are taken out of the content/document flow, while the other lis A B C etc. are not.
Technically you are not expanding them rather show/hiding them.
Here is the MDN article:
Position
You either would've to "put them back" into the content flow by using position: relative, for example, or by shifting the other elements downwards with a padding-top. The second solution wouldn't be my first choice, though.
I have a left side menu that the sub menu doesn't display properly. When I redirect one to another component it is not working. When I move dashboard to trip component, sub menu list isn't shown. When I refreshed and direct clicked on trip component, that showed sub list. But when I go to dashboard and again click on trip component that doesn't work.
I expect properly working when I move one to another component submenu list are shown.
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div class="user-details">
<div class="text-center"></div>
<div class="user-info"></div>
<div id="sidebar-menu">
<ul>
<li>
<a href="#" routerLink="/dashboard" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-home"></i>
<span> Dashboard</span>
</a>
</li>
<li>
<a href="#" routerLink="/user" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-account"></i>
<span> User</span>
</a>
</li>
<li>
<a href="#" routerLink="/tripmangement" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span> Trip</span>
</a>
<ul>
<li>
<a href="#" routerLink="/place" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>Location</span>
</a>
</li>
<li>
<a href="#" routerLink="/triproute" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>Routes</span>
</a>
</li>
<li>
<a href="#" routerLink="/ticketprice" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>Ticket Price</span>
</a>
</li>
</ul>
</li>
<li>
<a class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>Bookings</span>
</a>
<ul class="">
<li>
<a href="#" routerLink="/addbooking" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi downloads"></i>
<span>Add</span>
</a>
</li>
<li>
<a href="#" routerLink="/listbooking" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>List</span>
</a>
</li>
</ul>
</li>
<li>
<a class="waves-effect">
<i class="mdi mdi-clipboard-text"></i>
<span>Reports</span>
</a>
<ul class="">
<li>
<a href="#" routerLink="/userreport" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi downloads"></i>
<span>User Report</span>
</a>
</li>
<li>
<a href="#" routerLink="/bookingreport" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>Booking Report</span>
</a>
</li>
</ul>
</li>
<li>
<a class="waves-effect">
<i class="mdi mdi-settings"></i>
<span>Settings</span>
</a>
<ul class="">
<li>
<a href="#" routerLink="/page" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>Page setting</span>
</a>
</li>
<li>
<a href="#" routerLink="/general" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi mdi-bus"></i>
<span>General Setting</span>
</a>
</li>
<li>
<a href="#" routerLink="/emailformat" routerLinkActive="activemenu" class="waves-effect">
<i class="mdi-email"></i>
<span>Email format Setting</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
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
/* */
I have a basic BootStrap 3 nav header. I would like to separate the existing header so that I have the single dropdown item on the far right, and the rest of the other main menu items to be on the far left. Not sure how to do this?
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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">Cost Tracking</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-left" style="margin-left:96px">
<button type="button" class="btn btn-primary btn-sm">Project Details</button>
<button type="button" class="btn btn-primary btn-sm">Cost Centre</button>
<button type="button" class="btn btn-primary btn-sm">Address Book</button>
<button type="button" class="btn btn-primary btn-sm">Time Tracking</button>
<button type="button" class="btn btn-primary btn-sm">Reports</button>
<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-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 navbar-static-side" role="navigation">
<div class="sidebar-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 class="background-color:#333">
<i class="fa fa-edit fa-fw"></i> Project Info
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Roles
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i> Rate Schedule Review
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Surcharges
</li>
<li>
<i class="fa fa-group fa-fw"></i> Project Crews
</li>
<li>
<i class="fa fa-user fa-fw"></i> Project Employees
</li>
</ul>
<!-- /#side-menu -->
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
According to the docs to have a navigation over to the right hand side of the navbar you need to place it in it's own <ul>:
<ul class="nav navbar-nav navbar-right">
<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-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>
As a side note, the only direct child of a <ul> can be a <li>, so your <button>s need to be wrapped in list elements:
<li><button type="button" class="btn btn-primary btn-sm">Project Details</button></li>
Demo
If you don't want it in a separate list, then you'll have to override the float on the <ul> and then float the final <li> right. You'll also need the .dropdown-menu-right class on the dropdown <ul>.
...
<li><button type="button" class="btn btn-primary btn-sm">Reports</button></li>
<li class="dropdown pull-right">
<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-menu-right dropdown-user">
<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>
CSS
.navbar-nav {
float: none;
}
Demo