Unordered List Dropdown Submenu - Stay Activated When Clicked - html

I'm working on the navbar for a site and for the menu it has an unordered list with submenus that are actived when the menu item is hovered over, but when you remove your mouse from the menu item to attempt to click on a submenu item the submenu dissapears. Is there a way with CSS/HTML to hover over it, then have the user click on it to keep it activated? If that's not possible, is it possible to change it to stay activated on a click without the preview on the hover?
HTML:
<!-- Navbar -->
<div class="header">
<div class="topbar">
<ul class="list-inline">
<li class="smallsocial"> </li><li> </li>
<li class="smallsocial"> <a href="https://www.facebook.com/prayingpelicanmissions" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Facebook">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://plus.google.com/+PrayingpelicanmissionsOrg" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Google Plus">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.youtube.com/user/petepelican?sub_confirmation=1" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Youtube">
<i class="fa fa-youtube"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://twitter.com/PrayingPelican" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Twitter">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="smallsocial">
<a href="https://www.instagram.com/prayingpelicanmissions/" class="tooltips" data-toggle="tooltip" data-placement="top" title="" data-original-title="Instagram">
<i class="fa fa-instagram"></i>
</a></li><li> </li>
<li class="pull-right"><button class="btn btn-dark">CONTACT US</button></li>
<li class="pull-right"><button class="btn btn-dark">LOGIN</button></li>
</ul>
</div>
<!-- End Social Links -->
<div class="navbar mega-menu" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Navbar Brand -->
<div class="navbar-brand">
<a href="index.html">
<img class="default-logo" src="assets/img/whitelogo.png" alt="Logo">
<img class="shrink-logo" src="assets/img/blacklogo.png" alt="Logo">
</a>
</div>
<!-- ENd Navbar Brand -->
<!-- Header Inner Right -->
<!-- End Header Inner Right -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-responsive-collapse">
<div class="menu-container">
<ul class="nav navbar-nav">
<!-- Home -->
<li class="dropdown">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
About Us
</a>
<ul class="dropdown-menu">
<li>Who We Are</li>
<li>Partners</li>
<li>Trip Media</li>
<li>Trip Journals</li>
<li role="separator" class="divider"></li>
<li> Donate</li>
</ul>
<!-- End Home -->
<!-- Shortcodes -->
<li class="dropdown mega-menu-fullwidth">
<a href="javascript:void(0);" class="pull-right dropdown-toggle" data-toggle="dropdown">
Locations
</a>
<ul class="dropdown-menu">
<li>
<div class="mega-menu-content disable-icons">
<div class="container">
<div class="row equal-height">
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>United States</h3></li>
<!-- Typography -->
<li class="location"><i></i> Tucson, AZ</li>
<li class="location"><i></i>San Francisco, CA</li>
<li class="location"><i></i> Miami, FL</li>
<li class="location"><i></i> Chicago, IL</li>
<li class="location"><i></i> Boston, MA</li>
<li class="location"><i></i>Minneapolis, MN</li>
<li class="location"><i></i> Pittsburg, PA</li>
<li class="location"><i></i> Providence, RI</li>
<li class="location"><i></i> Memphis, TN</li>
<li class="location"><i></i>US Reservations</li>
<!-- End Typography -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CENTRAL AMERICA</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Belize</li>
<li class="location"><i></i>Costa Rica</li>
<li class="location"><i></i>Guatemala</li>
<li class="location"><i></i>Mexico</li>
<li class="location"><i></i>Nicaragua</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>CARIBBEAN</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Bahamas</li>
<li class="location"><i></i>Cuba</li>
<li class="location"><i></i>Dominican Republic</li>
<li class="location"><i></i>Haiti</li>
<li class="location"><i></i>Jamaica</li>
<li class="location"><i></i>Puerto Rico</li>
<!-- End Buttons -->
</ul>
</div>
<div class="col-md-3 equal-height-in">
<ul class="list-unstyled equal-height-list">
<li><h3>AFRICA/EUROPE</h3></li>
<!-- Buttons -->
<li class="location"><i></i>Italy</li>
<li class="location"><i></i>Ghana</li>
<li class="location"><i></i>South Africa</li>
<!-- End Buttons -->
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<!-- End Shortcodes -->
<!-- Demo Pages -->
<li class="">
<a href="http://www.prayingpelicanmissions.org/journals">
Trip Journals
</a>
</li>
<li class=".button12">
<a href="http://www.prayingpelicanmissions.org/mission-trip-registration">
<button type="button" class="btn btn-default">REGISTER FOR A TRIP</button>
</a>
</li>
<div class="header-inner-right">
<li class="menu-icons">
<i class="menu-icons-style search search-close search-btn fa fa-search"></i>
<div class="search-open">
<input type="text" class="animated fadeIn form-control" placeholder="Start searching ...">
</div>
<!-- End Demo Pages -->
</ul>
<!--/navbar-collapse-->
</div>
</div>
</div>
</div>
</div> <!-- End Navbar -->

There might be a small gap between the menu and submenu. Take a look here.

Ideally some code would help, but sounds like a nested dropdown would be more accurate, also I assume you are using Bootstrap 3?
Check this example Multi level dropdown menu BS3

Related

Laravel helper method for active the sidebar

I am trying to use the laravel helper method for active the sidebar but it does not working. Can anyone tell us how to apply Laravel helper method to this sidebar.
Here this is my sidebar.blade.php file
<aside class="main-sidebar sidebar-dark-primary">
<!-- Main Sidebar Container -->
<!-- Brand Logo -->
<a href="{{url('dashboard')}}" class="brand-link">
<img src="{{asset('assets/adminlte-boot-4/dist/img/AdminLTELogo.png')}}" alt="Digital CRM" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">DIgital CRM</span>
</a>
<!-- Sidebar -->
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- 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">
<a href="{{url('dashboard')}}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('webtolead')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Web to Lead</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
Solution for this: add these method in your tag:
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link {{ request()->is('accounts*') ? 'active' : '' }}">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
OR
<li class="nav-item ">
<a href="{{url('admin/updateprofile')}}" class="nav-link {{ Request::is('*admin/updateprofile*')? 'active' : '' }}">
<i class="fas fa-user nav-icon"></i>
<p>ProfileEdit</p>
</a>
</li>
both method are working...
Creating helper.php is good but this method is short in my case.
<aside class="main-sidebar sidebar-dark-primary">
<!-- Main Sidebar Container -->
<!-- Brand Logo -->
<a href="{{url('dashboard')}}" class="brand-link">
<img src="{{asset('assets/adminlte-boot-4/dist/img/AdminLTELogo.png')}}" alt="Digital CRM" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">DIgital CRM</span>
</a>
<!-- Sidebar -->
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- 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">
<a href="{{url('dashboard')}}" class="nav-link {{ request()->is('dashboard') ? 'active' : '' }}">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('webtolead')}}" class="nav-link {{ request()->is('webtolead*') ? 'active' : '' }}">
<i class="nav-icon fas fa-file"></i>
<p>Web to Lead</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>

How to add second level menu in sb admin panel?

Using sb admin panel 2 in my application. I want to make second level menu in side menu, but when i do that, second level menu is always open. I want when I click first level menu then second menu appear. Not able to understand where is the problem.
<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-dashboard fa-fw"></i>Sudent <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Student
</li>
<li>
Subject
</li>
</ul>
</li>
<li>
<i class="fa fa-dashboard fa-fw"></i>Routine <span class="fa arrow"></span>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
this code is present in my page header and added all js in my footer
<!-- jQuery -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../bower_components/raphael/raphael-min.js"></script>
<script src="../bower_components/morrisjs/morris.min.js"></script>
<script src="../js/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
Add collapse class to your second level
<ul class="nav nav-second-level collapse">
P.S
it looks like you are using SBAdmin V2 and not V1, should specify that.
Also, i would suggest to try copy/paste from their demo pages and modifying it to your likings.
SBAdminV2 Live Preview
SBAdminV2 Github page (Source, Documentation, and HELP! :) )
SBAdminV1 Live Preview
EDIT
Seems to work fine with their exact code.
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/morrisjs/morris.css" rel="stylesheet">
<link href="https://blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<!-- /.navbar-header -->
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav in" 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 collapse">
<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 collapse">
<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 collapse">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level collapse">
<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 collapse">
<li>
Blank Page
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- /#page-wrapper -->
</div>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/jquery/jquery.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/vendor/metisMenu/metisMenu.min.js"></script>
<script src="//blackrockdigital.github.io/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
</body>

css not showing correctly asp.net mvc

hi i'm working on a admin template. I converted the html codes into mvc structure. Now i am stuck , when i create a page using the layout in the shared folder the footer goes up to the navigation bar. for more understanding check the screenshot
here is my _layoutadmin.cshtml
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<i class="fa fa-paw"></i> <span>Admin Panel</span>
</div>
<div class="clearfix"></div>
<!-- menu prile quick info -->
<div class="profile">
<div class="profile_pic">
<img src="~/Content/admin/AdminLogo.jpg" alt="..." class="img-circle profile_img"/>
#*<img src="images/img.jpg" alt="..." class="img-circle profile_img">*#
</div>
<div class="profile_info">
<span>Welcome,</span>
<h2>John Doe</h2>
</div>
</div>
<!-- /menu prile quick info -->
<br />
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
<a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
Dashboard
</li>
<li>
Dashboard2
</li>
<li>
Dashboard3
</li>
</ul>
</li>
<li>
<a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
General Form
</li>
<li>
Advanced Components
</li>
<li>
Form Validation
</li>
<li>
Form Wizard
</li>
<li>
Form Upload
</li>
<li>
Form Buttons
</li>
</ul>
</li>
<li>
<a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
General Elements
</li>
<li>
Media Gallery
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Glyphicons
</li>
<li>
Widgets
</li>
<li>
Invoice
</li>
<li>
Inbox
</li>
<li>
Calender
</li>
</ul>
</li>
<li>
<a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
Tables
</li>
<li>
Table Dynamic
</li>
</ul>
</li>
<li>
<a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
Chart JS
</li>
<li>
Chart JS2
</li>
<li>
Moris JS
</li>
<li>
ECharts
</li>
<li>
Other Charts
</li>
</ul>
</li>
</ul>
</div>
<div class="menu_section">
<h3>Live On</h3>
<ul class="nav side-menu">
<li>
<a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
E-commerce
</li>
<li>
Projects
</li>
<li>
Project Detail
</li>
<li>
Contacts
</li>
<li>
Profile
</li>
</ul>
</li>
<li>
<a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" style="display: none">
<li>
404 Error
</li>
<li>
500 Error
</li>
<li>
Plain Page
</li>
<li>
Login Page
</li>
<li>
Pricing Tables
</li>
</ul>
</li>
<li>
<a><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav class="" role="navigation">
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="">
<a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe
<span class=" fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu dropdown-usermenu animated fadeInDown pull-right">
<li>
Profile
</li>
<li>
<a href="javascript:;">
<span class="badge bg-red pull-right">50%</span>
<span>Settings</span>
</a>
</li>
<li>
Help
</li>
<li>
<i class="fa fa-sign-out pull-right"></i> Log Out
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<!-- top tiles -->
#RenderBody()
<!-- footer content -->
<footer>
<div class="copyright-info">
<p class="pull-right">
Gentelella - Bootstrap Admin Template by Colorlib
</p>
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
<!-- /page content -->
</div>
</div>
<div id="custom_notifications" class="custom-notifications dsp_none">
<ul class="list-unstyled notifications clearfix" data-tabbed_notifications="notif-group"></ul>
<div class="clearfix"></div>
<div id="notif-group" class="tabbed_notifications"></div>
</div>
Using <footer> tag in HTML does not create a sticky bottom footer.
Have a look to this Bootstrap example

How to show Bootstrap dropdown above everything?

I have this problem:
(sorry for the Greek).
I want this dropdown menu, positioned on top of everything else on the page.
I don't think that I can use position:fixed, as I want the dropdown to always be below the blue button above it.
Here is the html (I'm using bootstrap):
https://jsfiddle.net/9pLg1kLy/2/
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="navbar-default sidebar" role="navigation">
<div id="navbar-root-div" class="sidebar-nav navbar-collapse in">
<ul class="nav" id="side-menu">
<!--<sidebar-search></sidebar-search>-->
<li ng-show=currentUser ui-sref-active="active"> <a ui-sref="dashboard.map"><i class="fa fa-map fa-fw"></i> Χάρτης</a>
<!-- </li>
<li ng-show=currentUser ui-sref-active="active">
<a ui-sref="dashboard.chart"><i class="fa fa-line-chart fa-fw"></i> Δείκτες Απόδοσης</a>
</li>-->
<li id="deleteDevicePathsID" ng-show="devicePaths.p1" ui-sref-active="active"> </i> Διαγραφή Διαδρομών
</li>
<li ng-class="{active: collapseVar==1}" ng-cloak ng-show="devicesLoaded && currentUser">{{dropDown}} <a href="" ng-click="check(1)"><i class="fa fa-car fa-fw"></i> Συσκευές<span ng-show=DevicesArray
class="fa arrow"></span></a>
<ul id="deviceDataList" class="nav nav-second-level" collapse="collapseVar!=1">
<li ng-show=devicesLoaded class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση..."> <span class="input-group-btn">
<!--<button class="btn btn-primary dropdown" type="button"></button> -->
<div class="dropdown">
<a id="toolsDrop" href="" role="button"
class="dropdown-toggle btn btn-primary"
data-toggle="dropdown"
style="padding: 6px 6px 6px 8px;">Φίλτρα <b
class="caret"></b></a>
<ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
<li>
<a href="" style="padding: 6px; min-width: 0"
ng-click="statusFilter = movingFilter"> <img
src="misc/images/pinOntheMove.png"> Κινείται</a>
</li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = stoppedFilter"> <img
src="misc/images/pinStopped.png"> Σε Στάση</a>
</li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = unknownFilter"> <img
src="misc/images/pinUnknown.png"> Άγνωστο</a>
</li>
<li class="divider hidden-xs"></li>
<li><a href="" style="padding: 6px;min-width: 0"
ng-click="statusFilter = allFilter"> <i class="fa fa-th-list"></i> Όλα</a>
</li>
</ul>
</div>
</span>
</div>
</li>
<li>
<ul class="nav nav-second-level sidebar-device-list">
<li ng-init="third=!third" ng-class="{active: multiCollapseVar==3}" ng-repeat="device in DevicesArray | filter:dataFilter | filter:searchText | filter: statusFilter" id="{{device.DeviceId}}" lat="{{device.DeviceData.Position.Y}}" lng="{{device.DeviceData.Position.X}}" ui-sref-active="active"> <a style="font-weight:bold; border-style: none none solid none;" href="" ng-click="CenterMapOnPosition(device.DeviceData.Position, device.DeviceData.DeviceId)"><img
width="26"
height="26"
ng-src="misc/images/pin{{device.DeviceData.State}}.png">
{{device.Name}} <p style="font-weight: normal; color: #002a80">{{device.DeviceData.Location}}</p></a>
</li>
</ul>
</li>
</ul>
<li ng-show="devicesLoaded && currentUser" ui-sref-active="active"> </i><i ng-hide="labelsShown" class="fa fa-square-o fa-fw"></i> Ονόματα Οχημάτων
</li>
<li ng-show=currentUser ui-sref-active="active"> </i> Αποσύνδεση
</li>
</ul>
</div>
</div>
The dropdown menu is at line 32.
Try to add z-index with position:relative that's make it visible
Try adding a z-index on the element which is cut off. This will bring the element to the front

How to make the left sidebar fixed while scrolling down the page

I have a left sidebar and a main menu.....i need to keep the left sidebar fixed while scrolling down the page....but am not getting it.
This is my code.
Can anyone help me how to do it?
<div class="nav-wrapper">
<!-- START Left navbar-->
<ul class="nav navbar-nav">
<li>
<!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
<a href="" data-toggle-state="aside-collapsed" class="hidden-xs">
<em class="fa fa-navicon"></em>
</a>
<!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
<a href="" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
<em class="fa fa-navicon"></em>
</a>
</li>
</ul>
<!-- END Left navbar-->
<!-- START Right Navbar-->
<ul class="nav navbar-nav navbar-right">
<!-- <li>
<a href="" data-search-open="">
<em class="icon-magnifier"></em>
</a>
</li> -->
<!-- Fullscreen (only desktops)-->
<!-- <li class="visible-lg">
<a href="" data-toggle-fullscreen="">
<em class="fa fa-expand"></em>
</a>
</li> -->
<li class="dropdown user">
<!-- <span style="color: #ddd;"></span> -->
<a title="Log Out" style="text-decoration: none; box-shadow:0px 0px 0px; cursor: pointer;" class="dropdown-toggle"
data-toggle="dropdown" data-hover="dropdown"
data-close-others="true">
{{loggedInUser.userFirstName}} {{loggedInUser.userLastName}} <i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu">
<li><i class="fa fa-sign-out"></i> Log Out</li>
</ul>
</li>
</ul>
</div>
Use position:fixed;overflow:auto; on the left one. You may need to adjust the position of the right one. Use position:relative; on the right panel.