I am using the following to show a list horizontally or vertically depending on the screen size.
<div class="row">
<div class="col-md-3">
<div class="d-md-none">
<div class="card">
<div class="card-body p-0">
<ul class="list-group list-group-horizontal">
<li class="list-group-item border-0">
<a href="javascript: void(0);" #onclick="">
<i class="fas fa-search" />
</a>
</li>
<li class="list-group-item border-0">
<a href="javascript: void(0);" #onclick="">
<i class="fas fa-address-card" />
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="d-none d-md-block">
<!-- Here the list vertically !-->
</div>
</div>
<div class="col-md-9">
</div>
</div>
The problem is that when viewed on mobile devices, the card overflows out of its div. What can I change to make this not happen? Can I decrease the spacing between the items?
Related
I am trying to implement AdminLTE theme in my project. I am an intern and working with jsf+hibernate. I have been told to use adminlte theme and trying to work it out with jsf.
At the beginning I fixed the stylesheeet syntax and JS syntax. After that fixed the /> parts of the code to apply on JSF. Now everything is looking same except icons. I am trying to implement them same way as I implemented JS and CSS files but it does not work.
For example, code was:
<link rel="stylesheet" href="dist/css/adminlte.min.css">
and I am using it like:
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
It works when I'm use:
<h:graphicImage name ="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
instead of:
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
Icons look like this:
My template.xhtml:
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>AdminLTE 3 | Starter</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
<h:outputStylesheet library="plugins/fontawesome-free/css" name="all.min.css" />
<h:outputStylesheet library="dist/css" name="adminlte.min.css" />
</h:head>
<h:body class="hold-transition sidebar-mini">
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Navbar Search -->
<li class="nav-item">
<a class="nav-link" data-widget="navbar-search" href="#" role="button">
<i class="fas fa-search"></i>
</a>
<div class="navbar-search-block">
<form class="form-inline">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-navbar" type="button" data-widget="navbar-search">
<i class="fas fa-times"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<h:graphicImage name ="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3"/>
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<h:graphicImage name="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"/>
<span class="brand-text font-weight-light">PM System</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<h:graphicImage name ="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"/>
</div>
<div class="info">
Kullanıcı Adı
</div>
</div>
<!-- SidebarSearch Form -->
<div class="form-inline">
<div class="input-group" data-widget="sidebar-search">
<input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"/>
<div class="input-group-append">
<button class="btn btn-sidebar">
<i class="fas fa-search fa-fw"></i>
</button>
</div>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2021 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED SCRIPTS -->
<h:outputScript library="plugins/jquery" name="jquery.min.js"/>
<h:outputScript library="plugins/bootstrap/js" name="bootstrap.bundle.min.js"/>
<h:outputScript library="dist/js" name="adminlte.min.js"/>
</h:body>
</html>
can you try font awsome like this:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
I'm using bootstrap 4.3.1, ASP.NET MVC (.NET 5) and all the pages have gaps at the side which is fine but I want one div to ignore that and be 80% of the width and centered, whilst the remaining parts of the page stay the same.
No matter what the div wont change unless I put "width: 1000px;" and there's still the left margin, even though I specify "left: 50px !important".
I've tried a combination of setting the div as "container-fluid" and adding that into a "row". I've also tried adding style tags "style="width:80% !important; left:50px !important;padding:0px;margin:0px;"
Solution Zip File: Google Drive
<div class="row" style="width:80% !important; left:50px !important;padding:0px;margin:0px;" >
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
</ul>
<div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade active" id="rLocal">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 1
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rrEPRA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 2
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rSWA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 3
</div>
<div class="card-body">
<p>
None
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rGI">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 4
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<body>
<div class="container">
<main role="main" class="pb-3">
<div class="container-fluid">
<ul class="nav nav-tabs">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#rLocal">Test 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rrEPRA">Test 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rSWA">Test 3</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#rGI">Test 4</a></li>
</ul>
<div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="rLocal">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 1
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rrEPRA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 2
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rSWA">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 3
</div>
<div class="card-body">
<p>
None
</p>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="rGI">
<br />
<div class="card" style="width: 100%;">
<div class="card-header alert-danger">
Test 4
</div>
<div class="card-body">
<p>
TODO
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
You have a container-fluid inside of a container. Your parent container will take the appropriate width in the center of the screen, and then your container-fluid will take the 100% of that. So in the end you'll have a div with the same width of a container. All you need to do is remove the div enclosing the <main>, i.e., the <div class="container">.
It should look something like:
<main>
<div class="container-fluid">
// Navbar Code
</div>
</main>
This should span the navbar wide. However, you'll still have a 15px padding on both sides, you can remove it by adding a px-0 class on the container-fluid div.
Also, you have imported Jquery, Bootstrap-min and Bootstrap Bundle.
You do not the need the Bootstrap-min if you have the bundle. You should remove it to prevent any issues with JS related parts of Bootstrap.
I have an Accordion which has a header, inside which I need to place a dropdown menu. I've tried fiddling with the z-index thinking it was a stacking issue to no avail. I've reproduced the issue with a minimal sample at https://www.bootply.com/53bH05eQlf
Is there any way to get the dropdown menu to display correctly?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah
<div class="dropdown text-center show border-info border rounded menu-button float-left">
<a class="btn p-0 dropdown-toggle" href="#" role="button" id="some-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-bars"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="some-dropdown">
<li class="dropdown-item">Hidden behind the card!</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
<div class="card">
<div class="card-header">Blah</div>
</div>
</div>
Adding style="overflow: visible" to the card div which contains the dropdown will solve the issue.
That is, for the bootply example replace <div class="card"> on line 8 with <div class="card" style="overflow: visible">.
I want to achieve a layout like this:
But its not working properly, Im getting this: http://jsfiddle.net/9cfqjmkb/. The title should be aligned with the top of the image but its not working. Do you know why?
Also I want some margin between the image and the other div with the title and post date, as it is in the image above, but the margin is not working. Do you know why?
HTML
<div class="container">
<div class="row">
<div class="col-3">
<div class="bg-custom-light2 p-0">
<h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
?
.list-group {
width:300px;
}
.ml-2 {
align-self:flex-start;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-3">
<div class="bg-custom-light2 p-0">
<h2 class="font-weight-bold text-custom-blue-dark h5 border-color p-2">Title</h2>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<div>
<h6 class="font-weight-bold text-custom-blue-dark">Test title example for
example test post</h6>
<p>post date date</p>
</div>
<img class="ml-2" src="https://via.placeholder.com/50" alt="">
</li>
</ul>
</div>
</div>
</div>
</div>
I created a drop down menu fro my navbar, but it is not working when I hover on it.
My Template,
<header id="header" class="sticky-header" data-sticky-class="not-dark" >
<div id="header-wrap">
<div class="container clearfix">
<div class="divcenter" style="max-width:990px;">
<div id="primary-menu-trigger"><i class="icon-reorder"></i></div>
<!-- Logo
============================================= -->
<div id="logo" style="margin-top: 5px;">
<img src="assets/images/SW-Logo-Final.png" alt="Canvas Logo">
</div>
<span class="inputgroupcss col-sm-5" style="padding-top:12px;">
<input type="email" (keyup)="submit(button1.value)" #button1 class="form-control required email" placeholder="Search by Name or Email"
style="height:38px;">
<div class="col-sm-12 nopadding ">
<ul class="searchlist">
<li *ngFor="let detail of details">
<img [src]='detail.image' alt="profile_image" style="width: 35px;
height: 35px;">
<a (click)="redirect()" [routerLink]="['/demo/user',detail.profilename]">{{detail.profilename}}</a>
</li>
</ul>
</div>
</span>
<!-- #logo end -->
<!-- Primary Navigation
============================================= -->
<!-- <nav id="primary-menu" class="pull-left" style="margin-top:11px">
<form style="width:300px" id="widget-subscribe-form2" action="include/subscribe.php" role="form" method="post" class="nobottommargin">
<div class="input-group input-group-lg divcenter" style="max-width:600px;">
<input type="email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Search by Name or Email" style="height:38px;">
<span class="input-group-addon" style="height: 38px;padding: 6px 16px;"><i class="icon-line-search"></i></span>
</div>
</form> <div *ngFor="let id of ids" class = "nopadding col-sm-12">
<button class="badge notification" (click) = 'getRequests()'>
<span class="glyphicon glyphicon-bell"></span>
</button>
<span class="noti"> {{id.sent_id}}</span>
</div>
</nav> -->
<nav id="primary-menu" class="dark">
<ul>
<li class="onhovercolor">
<a href="#">
<div>srilatha mattepu</div>
</a>
</li>
<li id="top-cart" class="onhovercolor notopmargin noleftpadding" *ngFor="let id of ids"><i class="icon-email3" style="font-size:18px;color: #d35b29;"></i><span>{{id.sent_id}}</span>
<div class="top-cart-content">
<div class="top-cart-title">
<h6 class="nobottommargin text-center">You have {{id.sent_id}} Requests pending</h6>
</div>
<div class="col-xs-12 dropdownpanel">
<h6 class="nobottommargin">Friend Requests</h6>
</div>
<div class="col-xs-12 dropdownpanel">
<div class="col-xs-3 nopadding">
<img src="assets/images/gallery3.png" style="height:45px;width:50px">
</div>
<div class="col-xs-6 nopadding">
<h5 class="nobottommargin pendingnamescss">srilatha mattepu</h5>
</div>
<div class="col-xs-3 nopadding text-right">
pending
</div>
</div>
<div class="col-xs-12 dropdownpanel">
<div class="col-xs-3 nopadding">
<img src="assets/images/gallery3.png" style="height:45px;width:50px">
</div>
<div class="col-xs-6 nopadding">
<h5 class="nobottommargin requestsnamecss">srilatha mattepu</h5>
</div>
<div class="col-xs-3 nopadding text-right">
pending
</div>
</div>
</div>
</li>
<li class="onhovercolor norightpadding">
<div class="downarrowcss"><i class="icon-caret-down" style="font-size:25px !important"></i></div>
<ul class="menu-pos-invert">
<li>
<a href="/demo/profile">
<div><i class="icon-user"></i> My Profile</div>
</a>
</li>
<li>
<a href="/demo/settings">
<div><i class="icon-settings"></i> Settings</div>
</a>
</li>
<li>
<a href="/demo/password">
<div><i class="icon-settings"></i> Change Password</div>
</a>
</li>
<li>
<a href="#">
<div><i class="icon-off"></i> Logout</div>
</a>
</li>
</ul>
</li>
<li class="onhovercolor hidden-sm hidden-md visible-xs">
<a href="#">
<div>srilatha mattepu</div>
</a>
<ul>
<li>PROFILE</li>
<li>SOCIAL ADDRESSES</li>
<li class="list-borbtom">CUSTOM INFO</li>
<li>MY SOCIETY<span>(ALL)</span></li>
<ul class="left-sub-list">
<li>PERSONAL</li>
<li>PROFESSIONAL</li>
</ul>
<li>REQUESTS</li>
<li>MESSAGES</li>
<li class="list-borbtom">SOCIETY UPDATES</li>
<li class="list-borbtom">SEARCH</li>
<li class="list-borbtom">PASSWORD</li>
<li>SETTINGS</li>
<li>LOGOUT</li>
<li>Qr Code</li>
</ul>
</li>
</ul>
</nav>
<!-- #primary-menu end -->
</div>
</div>
</div>
</header>
I created a drop down menu fro my navbar, but it is not working when I hover on it.
First thing is that you have to use pure Bootstrap Navbar code.
and then simply add below Custom jQuery, and see magic your Drop-down will be open on hover of your parent menu link hover.
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
Please check attached fiddle.