Bootstrap collapseable menu closing all other submenus when opening one - javascript

I am coding a side menu with Bootstrap and I am already on quite a good stage. The submenus are opening.
My problem: If I click on one submenu it shows the sub links but when opening a second one it doesn't open that links. So I searched for a solution and found this one: Stackoverflow Answer. I adjusted the code and the javascript file to the changes. Now when opening the menu on my localhost installation, it lags a bit when opening or closing but it is closing all others which are opened. So I thought of asking if anyone here has a better solution or an idea why it lags that much. The code is very long so I will just post a JSfiddle: klick here.


From jQuery doc:
.slideToggle(): default duration 400 milliseconds
.toggle(): default duration 400 milliseconds
Those are your issues. In any case you can always use boostrap collapse methods.
//
// for each collapseable element, except the first, collapse (hide)
//
$('#side-menu ul.collapseable:visible:not(:first)').collapse('hide');
//
// clicking on the collapse anchor:
// get the css selector for the collapsible element
// collapse to hide all except the current one
// collapse to show the current one
//
$('#side-menu a[data-toggle="collapse"]').on('click', function (e) {
var ulId = this.getAttribute('href');
$('#side-menu ul.collapseable').not(ulId).collapse('hide');
$(ulId).collapse('show');
});
html, body {
font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #eaeaea;
color: #5e6062;
height: 100%;
}
/*-------------*/
/*Sidebar Menue*/
/*-------------*/
#side-menu {
background-color: #323232;
padding: 0px;
}
#side-menu h1 {
color: #fff;
text-align: center;
margin: 10px 0px;
font-size: 25px;
}
#side-menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#side-menu a {
padding: 12px 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
font-size: 13px;
display: block;
}
#side-menu a:hover {
background-color: #474747;
display: block;
color: #fff;
}
#side-menu .active a {
color: #fff;
background-color: #474747;
}
#side-menu .settings-btn {
background-color: #778b1c;
}
#side-menu .settings-btn a {
color: #fff;
}
#side-menu .settings-btn a:hover {
background-color: #778b1c;
}
#side-menu .collapseable li {
padding: 2px 0px 2px 12px;
}
#side-menu .collapseable a {
color: #fff;
font-size: 12px;
padding: 0px 10px 0px 5px;
text-decoration: none;
display: block
}
#side-menu .collapseable a:hover {
color: #fff;
}
/*ALTIS Side-Menü linker Rand*/
#side-menu .collapseable-ALTIS {
border-left: 4px solid #ffb700;
}
#side-menu .collapseable-ALTIS .active {
background-color: #474747;
}
#side-menu .collapseable-ALTIS .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*TANOA Side-Menü linker Rand*/
#side-menu .collapseable-TANOA {
border-left: 4px solid #00aa1a;
}
#side-menu .collapseable-TANOA .active {
background-color: #474747;
}
#side-menu .collapseable-TANOA .link:hover {
background-color: #474747;
}
/*---------------------------*/
/*--------------------*/
/*Main Content Bereich*/
/*--------------------*/
.display-table {
display: table;
padding: 0px;
height: 100%;
width: 100%;
}
.display-table-row {
display: table-row;
height: 100%;
}
.display-table-cell {
display: table-cell;
float: none;
height: 100%;
}
/*----------------*/
/*Top Menue Leiste*/
/*----------------*/
#nav-header {
background-color: #fff;
border-bottom: 1px solid #e7eaec;
}
#nav-header ul {
margin: 0px;
padding: 0px;
list-style: none;
color: #676a6c;
}
#nav-header ul li {
float: left;
margin-left: 15px;
padding: 17px 0px;
}
#nav-header ul a {
text-decoration: none;
}
#nav-header .logout {
color: #676a6c;
}
#nav-header .logout:hover {
color: #676a6c;
}
#nav-header #welcome {
margin-right: 20px;
}
/*-----------------------*/
/*Mobile Menu Toggle Icon*/
/*-----------------------*/
.navbar-default .navbar-toggle {
border-color: #778b1c;
background-color: #778b1c;
}
.navbar-default .navbar-toggle:hover {
background-color: #778b1c;
}
.navbar-default .navbar-toggle:focus {
background-color: #778b1c;
}
.navbar-default .icon-bar {
border: 1px white solid;
}
/*------*/
/*Inhalt*/
/*------*/
#content header {
border-bottom: 1px #f3f3f4 solid;
padding: 10px 0px;
}
#content {
margin: 20px 0px 50px 0px;
background-color: #fff;
border-top: 4px #778b1c solid;
}
.content-ALTIS {
border-top: 4px #ffb700 solid !important;
}
.page_title {
font-size: 14px;
font-weight: bold;
margin: 0px 20px;
}
.content-inner {
padding: 20px;
}
.content-inner a {
text-decoration: underline;
color: #2b5f8b;
}
.valign-top {
vertical-align: top;
}
.valign-center {
vertical-align: middle;
}
.horizontal-middle {
margin: 0px auto;
display: block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container-fluid display-table">
<!-- Menu -->
<div class="col-lg-2 c display-table-cell valign-top" id="side-menu">
<!-- Logo -->
<ul>
<!-- Startseite -->
<li class="link active">
<a href="#">
<i class="fa fa-fw fa-home" aria-hidden="true"></i>
Text 1
</a>
</li>
<!-- ALTIS Dropdown Menu -->
<li class="link">
<a href="#collapse-ALTIS" data-toggle="collapse" aria-controls="collapse-ALTIS" id="ALTIS"
href="#collapse-ALTIS" aria-expanded="true">
Text 2
</a>
<ul class="collapseable collapseable-ALTIS collapse in" id="collapse-ALTIS" aria-expanded="true">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TANOA Dropdown Menu -->
<li class="link">
<a href="#collapse-TANOA" data-toggle="collapse" aria-controls="collapse-TANOA" id="TANOA">
Text 3
</a>
<ul class="collapse collapseable collapseable-TANOA" id="collapse-TANOA">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- KOTH Dropdown Menu -->
<li class="link">
<a href="#collapse-KOTH" data-toggle="collapse" aria-controls="collapse-KOTH" id="KOTH">
Text 4
</a>
<ul class="collapse collapseable collapseable-KOTH" id="collapse-KOTH">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-users hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-sign-in hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-exclamation-triangle hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-bar-chart hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- TOOLS Dropdown Menu -->
<li class="link">
<a href="#collapse-TOOLS" data-toggle="collapse" aria-controls="collapse-TOOLS" ID="TOOLS">
Text 5
</a>
<ul class="collapse collapseable collapseable-TOOLS" id="collapse-TOOLS">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-search hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-refresh hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- FILTER Dropdown Menu -->
<li class="link">
<a href="#collapse-FILTER" data-toggle="collapse" aria-controls="collapse-FILTER" id="FILTER">
Text 6
</a>
<ul class="collapse collapseable collapseable-FILTER" id="collapse-FILTER">
<li class="link">
<a href="#">
<i class="fa fa-fw fa-globe hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-shield hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-eye hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-address-book hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
<li class="link">
<a href="#">
<i class="fa fa-fw fa-database hidden-xs" aria-hidden="true"></i> Text
</a>
</li>
</ul>
</li>
<!-- Einstellungen -->
<li class="link settings-btn">
<a href="#">
<i class="fa fa-fw fa-cog hidden-xs" aria-hidden="true"></i>
Text 7
</a>
</li>
</ul>
</div>
<section class="col-md-10 col-sm-11 display-table-cell valign-top">
<!-- vertikales Menu -->
<aside class="row">
<header id="nav-header" class="clearfix">
<div class="col-md-7">
<nav class="navbar-default pull-left">
<button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas"
data-target="#side-menu">
<span class="sr-only">Navigation aufklappen und zuklappen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</nav>
</div>
<!-- Menu oben rechts -->
<div class="col-md-5">
<ul class="pull-right">
<li id="welcome" class="hidden-xs">Welcome</li>
<li>
<a href="#" class="logout">
<i class="fa fa-fw fa-sign-out hidden-xs" aria-hidden="true"></i> Logout
</a>
</li>
</ul>
</div>
</header>
</aside>
<!-- Seiteninhalt -->
<div id="content">
<header>
<h2 class="page_title">Title</h2>
</header>
<div class="content-inner">
Content
</div>
</div>
</section>
</main>

Related

closing the previous opened submenu when click on new one

I have a vertical menu with submenu. I want to close the the previous clocked menu when clicking the new one. I just could open it. but byt this code all of them stay open. how can I do that?
this is the HTML code
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class='fa fa-caret-down right'></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
This is js:
<script>
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
</script>
and this is CSS:
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color:black;
font-family: IRANSans;
font-weight: 400;
}

Here you go...
Just change this...
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
...to this.
$(document).ready(function () {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function () {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
$(document).ready(function() {
$(".sub-menu ul").hide();
$(".sub-menu a").click(function() {
$(".sub-menu ul").not(this).hide(); // Hide everything, but not "this".
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
});
.menu-layout .first-level {
margin-bottom: 9px;
border-radius: 5%;
padding: 2px 10px 2px 10px;
line-height: 15px;
}
.second-level {
margin-bottom: 9px;
padding: 2px 50px 2px 10px;
line-height: 15px;
}
.menu-layout li a {
color: white !important;
font-size: 13px;
}
.menu-layout li a i {
color: white;
padding-left: 10px
}
.sidebar {
position: fixed;
top: 1px;
width: 250px;
height: calc(100% - 1px);
border-bottom-left-radius: 20px;
transition: all 0.3s ease;
background-color: black;
font-family: IRANSans;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="sidebar ">
<div class="menu-layout">
<ul>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa icon-users"></i><span data-i18n="" class="menu-title">User Manangement</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Users List</li>
<li class="second-level"> * Register New User *</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-leaf"></i><span data-i18n="" class="menu-title">Categories</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Category List</li>
<li class="second-level">* New category</li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Products</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Products List</li>
<li class="second-level"> * New Product </li>
</ul>
</li>
<li class="sub-menu nav-item first-level">
<a class="nav-link text-truncate" href="#"><i class="fa fa-product-hunt"></i><span data-i18n="" class="menu-title"> Orders</span> <span class="fa fa-caret-down right"></span></a>
<ul>
<li class="second-level">* Orders List</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

:after triangular shape not able to implement on hover

I'm trying to create a hover menu. on hover of it a triangular shape appears in the menu items. But when I go to the dropdown menu, it disappears.
.navbar-wrapper .col-lg-8 ul li a:hover{
color:#f1c575
}
.navbar-brand img{
padding-top:10px;
padding-bottom:10px;
}
.navbar{
position:relative;
}
.navbar:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #fff transparent transparent transparent;
left: 55px;
top: 99%;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
nav .navbar-nav .nav-item .nav-link{
line-height:59px;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s;
}
nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{
background-color: #f1c575;
}
nav ul li:hover > .nav-link {
background-color: #f1c575;
color: #FFF;
}
nav .navbar-nav .nav-item .nav-link {
position: relative;
}
nav .navbar-nav .nav-item .dropdown:before {
content: "";
display: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 0px;
}
/* Navbar Ends */
/* Nav Menu Starts */
.dropdown-content {
display: none;
position: absolute;
background-color: #7b8b93;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
nav ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown{
position: initial;
}
.nav-link:hover + .dropdown .dropdown-content{
display: block;
}
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="./images/Cnetric_High-Res_Logo.png" width="160px" height="65px"
alt="Cnetric Company Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Capabilities</a>
<div class="dropdown d-none d-md-block">
<div class="dropdown-content py-5">
<div class="row">
<div class="col-lg-4 open-source">
<h3 class="ml-4 menu-text">Products</h3>
<p class="ml-3"><a class="ml-2" href="#">Magento</a></p>
<p class="ml-3"><a class="ml-2" href="#">IBM v9 Commerce</a></p>
<p class="ml-3"><a class="ml-2" href="#">Drupal</a></p>
</div>
<div class="col-lg-8 services">
<h3 class="menu-text ml-5">Product Categories</h3>
<ul class="list-categories">
<li class="one">
<a href="#" title="E-Commerce">
<img class="make-white" src="./images/aoe_icons_services_order_management.svg"
alt="E-Commerce">
<span class="service-title">E-Commerce</span>
</a>
</li>
<li class="two">
<a title="Content Management" href="#">
<img class="make-white" src="./images/aoe_icons_webportal.svg"
alt="Content Management">
<span class="service-title">Content Management</span>
</a>
</li>
<li class="three">
<a title="Middleware & ESB" href="#">
<img class="make-white" src="./images/Plattform1.svg" alt="Middleware & ESB">
<span class="service-title">Middleware & ESB</span>
</a>
</li>
<li class="one">
<a title="Search & Recommendation" href="#">
<img class="make-white" src="./images/Search2.svg" alt="Search & Recommendation">
<span class="service-title">Search & Recommendation</span>
</a>
</li>
<li class="three">
<a title="Identity & Access Management" href="#">
<img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity">
<span class="service-title">PIM Systems</span>
</a>
</li>
<li class="three">
<a title="Identity & Access Management" href="#">
<img class="make-white" src="./images/aoe_icons_technologies-13.svg" alt="Identity & Access Management">
<span class="service-title">Identity & Access Management</span>
</a>
</li>
<li class="one">
<a title="Development Frameworks" href="#">
<img class="make-white" src="./images/aoe_icons_betrieb.svg" alt="Development Frameworks">
<span class="service-title">Development Frameworks</span>
</a>
</li>
<li class="two">
<a title="CRM Systems" href="#">
<img class="make-white" src="./images/aoe_icons_crm_2.svg" alt="CRM Systems">
<span class="service-title">CRM Systems</span>
</a>
</li>
<li class="three">
<a title="Databases & Storage" href="#">
<img class="make-white" src="./images/aoe_icons_Effiziente_Datenverwaltung.svg"
alt="Databases & Storage">
<span class="service-title">Databases & Storage</span>
</a>
</li>
<li class="one">
<a title="Mobile Frameworks" href="#">
<img class="make-white" src="./images/aoe_icons_mobile-02.svg"
alt="Mobile Frameworks">
<span class="service-title">Mobile Frameworks</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Solutions</a>
<div class="dropdown d-none d-md-block">
<div class="dropdown-content py-5">
<div class="row">
<div class="col-lg-4 open-source">
<h3 class="ml-4 menu-text">Open Source Solution Suites</h3>
<p class="ml-3 commerce"><a class="ml-2" href="#">Dr.Commerce</a></p>
<p class="ml-3 universal"><a class="ml-2" href="#">Universal Commerce</a></p>
<p class="ml-3 emmerging"><a class="ml-2" href="#">Emmerging Techlogies</a></p>
</div>
<div class="col-lg-8 services">
<h3 class="menu-text ml-5">Services & Technologies</h3>
<ul class="list-categories">
<li class="one">
<a href="#" title="E-Commerce">
<img class="make-white"
src="./images/Strategy2.svg">
<span class="service-title">Strategy & Consulting</span>
</a>
</li>
<li class="two">
<a title="Content Management" href="#">
<img class="make-white"
src="./images/Design1.svg">
<span class="service-title">UX & Design</span>
</a>
</li>
<li class="three">
<a title="Middleware & ESB" href="#">
<img class="make-white"
alt="Software Architecture" src="./images/aoe_icons_Software_Architektur.svg">
<span class="service-title">Software Architecture</span>
</a>
</li>
<li class="one">
<a title="Search & Recommendation" href="#">
<img class="make-white"
src="./images/aoe_icons_betrieb.svg">
<span class="service-title">Agile Development</span>
</a>
</li>
<li class="two">
<a title="PIM Systems" href="#">
<img class="make-white" alt="Digital Products"
src="./images/Digitization2.svg">
<span class="service-title">Digital Products</span>
</a>
</li>
<li class="three">
<a title="Identity & Access Management" href="#">
<img class="make-white"
alt="Payment & Fulfillment" src="./images/aoe_icons_services_payment.svg">
<span class="service-title ng-binding">Payment & Fulfillment</span>
</a>
</li>
<li class="one">
<a title="Development Frameworks" href="#">
<img class="make-white" alt="Systems Integration"
src="./images/Integration1.svg">
<span class="service-title ng-binding">Systems Integration</span>
</a>
</li>
<li class="two">
<a title="CRM Systems" href="#">
<img class="make-white"
alt="DevOps & Operations" src="./images/aoe_icons_Continuous_Deployment.svg">
<span class="service-title ng-binding">DevOps & Operations</span>
</a>
</li>
<li class="three">
<a title="Databases & Storage" href="#">
<img class="make-white" alt="Customer Care"
src="./images/aoe_icons_Customer_Care.svg">
<span class="service-title ng-binding">Customer Care</span>
</a>
</li>
<li class="one">
<a title="Mobile Frameworks" href="#">
<img class="make-white" src="./images/aoe_icons_mobile-02.svg"
alt="Mobile Frameworks">
<span class="service-title">Mobile Frameworks</span>
</a>
</li>
<li class="two">
<a title="Portal" href="#">
<img class="make-white" alt="Portals & Applications" src="./images/aoe_icons_web_and_mobile_applications.svg">
<span class="service-title">Portals & Applications</span>
</a>
</li>
<li class="three">
<a title="CMS Solutions" href="#">
<img class="make-white" alt="CMS Solutions" src="./images/aoe_icons_web_content_management.svg">
<span class="service-title">CMS Solutions</span>
</a>
</li>
<li class="one">
<a title="Middle Ware" href="#">
<img class="make-white" alt="ESB & Middleware" src="./images/Plattform1.svg">
<span class="service-title">ESB & Middleware</span>
</a>
</li>
<li class="two">
<a title="CRM Integration" href="#">
<img class="make-white" alt="CRM Integration" src="./images/aoe_icons_crm_2.svg">
<span class="service-title">CRM Integration</span>
</a>
</li>
<li class="three">
<a title="Identity" href="#">
<img class="make-white" src="./images/aoe_icons_technologies_IRM.svg">
<span class="service-title">Identity & Access Mngmt</span>
</a>
</li>
<li class="one">
<a title="Search" href="#">
<img class="make-white" alt="Search" src="./images/Search2.svg">
<span class="service-title">Search</span>
</a>
</li>
<li class="two">
<a title="E-Commerce" href="#">
<img class="make-white" alt="E-Commerce" src="./images/aoe_icons_services_order_management.svg">
<span class="service-title">E-Commerce</span>
</a>
</li>
<li class="three">
<a title="Mobile Apps" href="#">
<img class="make-white" alt="Mobile Apps" src="./images/aoe_icons_web_and_mobile_applications.svg">
<span class="service-title">Mobile Apps</span>
</a>
</li>
<li class="one">
<a title="PIM Systems" href="#">
<img class="make-white" alt="PIM Systems" src="./images/aoe_icons_technologies-13.svg">
<span class="service-title">PIM Systems</span>
</a>
</li>
</ul>
<p class="text-center mt-4"><a class="btn btn-custom">View All</a></p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
I have tried using after and before. Once I go to the dropdown menu, the triangular shape disappears from the menu item above. I have tried multiple hover classes but it's not helping me. Can somebody please help me to fix this.

Use nav .navbar-nav .nav-item .dropdown:before instead nav .navbar-nav .nav-item .nav-link:hover:after
WHY?
In your code you want to target parent on hover child what impossible in css.
to solve it make shape in child then you can target it on hover child and also showon hover parent
Also show it on:
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
See working code
.navbar-wrapper .col-lg-8 ul li a:hover{
color:#f1c575
}
.navbar-brand img{
padding-top:10px;
padding-bottom:10px;
}
.navbar{
position:relative;
}
.navbar:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 12.5px 0 12.5px;
border-color: #fff transparent transparent transparent;
left: 55px;
top: 99%;
-webkit-transform: translateY(0) scale(1);
transform: translateY(0) scale(1);
-webkit-transition: -webkit-transform 337ms ease-in-out;
transition: -webkit-transform 337ms ease-in-out;
transition: transform 337ms ease-in-out;
transition: transform 337ms ease-in-out,-webkit-transform 337ms ease-in-out;
}
nav .navbar-nav .nav-item .nav-link{
line-height:59px;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
-o-transition: background-color 1s;
transition: background-color 1s;
}
nav .navbar-nav .nav-item .nav-link:hover, .dropdown:hover .dropbtn{
background-color: #f1c575;
}
nav ul li:hover > .nav-link {
background-color: #f1c575;
color: #FFF;
}
nav .navbar-nav .nav-item .nav-link {
position: relative;
}
nav .navbar-nav .nav-item .dropdown:before {
content: "";
display: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #7B8B93;
position: absolute;
left: 35%;
bottom: 0px;
}
/* Navbar Ends */
/* Nav Menu Starts */
.dropdown-content {
display: none;
position: absolute;
background-color: #7b8b93;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
nav ul li .dropdown:hover .dropdown-content {
display: block;
}
.dropdown{
position: initial;
}
.nav-link:hover + .dropdown .dropdown-content{
display: block;
}
.nav-link:hover + .dropdown:before ,.dropdown:hover:before{
display: block!important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Capabilities</a>
<div class="dropdown">
<div class="dropdown-content py-5">
<div class="row">
<div class="col-lg-4 open-source">
<h3 class="ml-4 menu-text">Products</h3>
<p class="ml-3"><a class="ml-2" href="#">Magento</a></p>
<p class="ml-3"><a class="ml-2" href="#">IBM v9 Commerce</a></p>
<p class="ml-3"><a class="ml-2" href="#">Drupal</a></p>
</div>
<div class="col-lg-8 services">
<h3 class="menu-text ml-5">Product Categories</h3>
<ul class="list-categories">
<li class="one">
<a href="#" title="E-Commerce">
<img class="make-white" src="./images/aoe_icons_services_order_management.svg" alt="E-Commerce">
<span class="service-title">E-Commerce</span>
</a>
</li>

submenu is not positioning as desired

I want to make my dropdown menu like in the image below. The problem is when I hover on the second item of main menu, the submenu leaves a margin from top as shown on left hand side of picture. I do not want that empty space. I want the submenu to always show on the same size and position for all the main menu options which have a submenu.
.dropdown-submenu {
position:relative;
}
.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
margin-left:0px;
-webkit-border-radius:0 6px 6px 6px;
-moz-border-radius:0 6px 6px 6px;
border-radius:0 6px 6px 6px;
}
.dropdown-submenu > a:after {
content: " ";
display: block;
float: right;
height: 0;
margin-right: -1px;
margin-top: 5px;
width: 190px;
padding-left:10px;
}
#abg > li > a:hover, #abg > .active > a:hover {
text-decoration: none;
background-color:#49b3e7;
padding-top:15px;
padding-bottom:20px;
}
#media (max-width: 767px) {
.navbar-nav {
display: inline;
}
.navbar-default .navbar-brand {
display: inline;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-nav .dropdown-menu > li > a {
color: red;
background-color: #ccc;
border-radius: 4px;
margin-top: 2px;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #333;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #ccc;
}
.navbar-nav .open .dropdown-menu {
border-bottom: 1px solid white;
border-radius: 0;
}
.dropdown-menu {
padding-left: 10px;
}
.dropdown-menu .dropdown-menu {
padding-left: 20px;
}
.dropdown-menu .dropdown-menu .dropdown-menu {
padding-left: 30px;
}
li.dropdown.open {
border: 0px solid red;
}
}
#media (min-width: 768px) {
ul.nav li:hover > ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<nav class="navbar navbar-default navbar-fixed-top hidden-xs " role="navigation" style="background-color:#49b3e7;color:white;margin-top:50px;cursor:pointer">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown" style="cursor:pointer">
<span class="dropdown-toggle" data-toggle="dropdown" style="color:white;cursor:pointer;">All Products </span><span class="caret" style="color:white;cursor:pointer;"></span>
<ul class="dropdown-menu" id="abg">
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Grocery</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Meals & Prep</li>
<li>Spreads & Sweeteners</li>
<li>Breafast</li>
<li>Salty Snacks</li>
<li>Chocolate & Candy</li>
<li>Condiments & Spices</li>
<li>Fruits & Nuts</li>
<li>Cookies & Bars</li>
<hr>
<li>Shop All Grocery</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Dole-licious </br>Snacks </h3>
<img src="grocery1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Beverages</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;text-align: -webkit-match-parent;">
<li>Coffee & Tea</li>
<li>Dairy</li>
<li>Jucies</li>
<li>Mixes</li>
<li>Sports & Energy</li>
<li>Water & Sparkling</li>
<hr>
<li>Shop All Beverages</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-61px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:77px;margin-top:163px;"> Flavorful</br> fun made </br>easy</h3>
<img src="beverages1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Bath & Body</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Deodorants</li>
<li>Hand Soaps</li>
<li>Shaving</li>
<li>Shower</li>
<li>Skin Care</li>
<hr>
<li>Shop All Bath & Body</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-116px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Would you </br>Lather </h3>
<img src="bath&body1.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Health</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Ladies</li>
<li>Dental & Eye</li>
<li>Relief</li>
<li>Supplements</li>
<li>Adult Care</li>
<hr>
<li>Shop All Health</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-171px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;">Picture of </br>Health </h3>
<img src="health.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Cleaning Supplies</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Surface Cleaners</li>
<li>Paper & Plastic</li>
<li>Laundry</li>
<li> Dish Soaps</li>
<li>Air & Fresheners</li>
<hr>
<li>Shop All Cleaning Supplies</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-226px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> So Fresh </br>and Clean </h3>
<img src="cleaning.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Home & Office</span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Stationery</li>
<li>Appliances & Tools</li>
<li>Tabletop & Storage</li>
<hr>
<li>Shop All Home & Office</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-281px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Lock in the </br>freshness </h3>
<img src="home.png" class="img-responsive"></a>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="ab10.html" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4" id="firstdivtext"><span class="dropdown-toggle" data-toggle="dropdown" style="cursor:pointer;padding-top:15px;padding-bottom:20px;">Babies & Kids </span></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"><span class="glyphicon glyphicon-chevron-right " id="thirddivarrow"></span></div>
</div>
</div>
</a>
<ul class="dropdown-menu" id="abg" style="width:250px;height:500px;border:1px solid white;">
<li>Care & Cleaning</li>
<li>Diapers & Wipes</li>
<li>Nutrition</li>
<hr>
<li>Shop All Babies & Kids</li>
</ul>
<ul class="dropdown-menu pull right" style="width:250px;height:500px;margin-left:240px;border:1px solid white;margin-top:-336px;">
<a href="#">
<h3 style="color:#49b3e7;margin-left:70px;margin-top:190px;"> Baby got </br> Bath </h3>
<img src="baby.png" class="img-responsive"></a>
</ul>
</li>
<li>Lifestyle<span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color: rgba(255, 255, 255, .1);"></span></li>
<li>Pets <span class="glyphicon glyphicon-chevron-right" style="margin-left:150px;color:rgba(255, 255, 255, .1);"></span></li>
<li>Shop All Products <span class="glyphicon glyphicon-chevron-right" style="margin-left:100px;color:rgba(255, 255, 255, .1);"></span></li>
</ul>
</li>
<li>Best Sellers</li>
<li>What's New</li>
<li>On Sale</li>
<li>Samples</li>
</ul>
</div>
</nav>
</div>

You have to add position: static and top: 0 in CSS.
.dropdown-submenu {
position: static;
top: 0;
left: 100%;
}

Add this to your CSS:
.dropdown-submenu {
position: static;
}
This places your submenu dropdowns relative to your main dropdown menu.

Bootstrap - collapsed menu not working

I took code for a dashboard we're building here; it's a free bootstrap dashboard template:
http://ironsummitmedia.github.io/startbootstrap-sb-admin-2/pages/index.html
We like it a lot as it's simple and displays the kind of layout we need. Here's what I've done to edit the above so far, to suit our needs:
http://tumolo.co.uk/smartcm/pages/index.html
If you resize your browser, so that you're reducing the width, with the original template, once it gets to (I assume) xs or sm size, the sidebar menu neatly hides and the 3line button in the top right displays. You can tell I'm new to bootstrap!
If you resize my version, once it gets to (I assume) xs or sm size, the sidbar menu displays instead of hides, like it should in original template.
IF it helps, I noticed that as I was editing from template to my version, when I started removing containers from original template, the menu stopped hiding when resizing browser window.
As we want to use this dashboard on mobile phones, it's important for me to understand how to make this menu hidden, as soon as you browse to it, from a mobile device... hope you can help, thanks.
<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> Overview
</li>
<li>
<i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li>
<i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li>
<i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li>
<i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>

You are missing <div class="collapse navbar-collapse" ></div>which surrounds the ul class.
Refer to the docs here > Bootstrap Navbar
/*!
* Start Bootstrap - SB Admin 2 Bootstrap Admin Theme (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
body {
background-color: #f8f8f8;
}
#wrapper {
width: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 568px;
background-color: #fff;
}
#media(min-width:768px) {
#page-wrapper {
position: inherit;
margin: 0 0 0 250px;
padding: 0 30px;
border-left: 1px solid #e7e7e7;
background-color: #fff;
}
}
.navbar-static-top {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links {
margin-right: 0;
background-color: #fff;
}
.navbar-top-links li {
display: inline-block;
}
.navbar-top-links li:last-child {
margin-right: 15px;
}
.navbar-top-links li a {
padding: 15px;
min-height: 50px;
}
.navbar-top-links .dropdown-menu li {
display: block;
}
.navbar-top-links .dropdown-menu li:last-child {
margin-right: 0;
}
.navbar-top-links .dropdown-menu li a {
padding: 3px 20px;
min-height: 0;
}
.navbar-top-links .dropdown-menu li a div {
white-space: normal;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
width: 310px;
min-width: 0;
}
.navbar-top-links .dropdown-messages {
margin-left: 5px;
}
.navbar-top-links .dropdown-tasks {
margin-left: -59px;
}
.navbar-top-links .dropdown-alerts {
margin-left: -123px;
}
.navbar-top-links .dropdown-user {
right: 0;
left: auto;
}
.sidebar .sidebar-nav.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.sidebar .sidebar-search {
padding: 15px;
}
.sidebar ul li {
border-bottom: 1px solid #e7e7e7;
}
.sidebar ul li a.active {
background-color: #eee;
}
.sidebar .arrow {
float: right;
}
.sidebar .fa.arrow:before {
content: "\f104";
}
.sidebar .active>a>.fa.arrow:before {
content: "\f107";
}
.sidebar .nav-second-level li,
.sidebar .nav-third-level li {
border-bottom: 0!important;
}
.sidebar .nav-second-level li a {
padding-left: 37px;
}
.sidebar .nav-third-level li a {
padding-left: 52px;
}
#media(min-width:768px) {
.sidebar {
z-index: 1;
position: absolute;
width: 250px;
margin-top: 51px;
}
.navbar-top-links .dropdown-messages,
.navbar-top-links .dropdown-tasks,
.navbar-top-links .dropdown-alerts {
margin-left: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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">
<img class="img-responsive" src="img/loginlogo.png">
</a>
</div>
<!-- /.navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<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-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> Overview
</li>
<li> <i class="fa fa-external-link-square fa-fw"></i> Allocation
</li>
<li> <i class="fa fa-table fa-fw"></i> Events & Stages
</li>
<li> <i class="fa fa-comment fa-fw"></i>Correspondence Log
</li>
<li> <i class="fa fa-folder-open fa-fw"></i>Resources
</li>
</ul>
</div>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
</div>

Skrollr init set <body> height to be too high

I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here:
http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo">21GUNS</h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-pinterest"></i>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
</li>
<li>
MENU 2
</li>
<li>
MENU 3
</li>
<li>
MENU 4
</li>
<li>
MENU 5
</li>
</ul>
</div>
</div>
</div>
</div>
</div><!-- headrow -->
<div class="bannerrow">
<img src="http://placehold.it/1800x600" alt="" />
</div>
<div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<header>
<h2>21SERVICES</h2>
<p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p>
</header>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-5">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
<div class="col-md-5 col-md-offset-2">
<div class="column2-box">
<i class="fa fa-gift fa-fw"></i>
<h3>FLAT DESIGN</h3>
<p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p>
</div>
</div>
</div><!-- row -->
</div>
</div>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script>
CSS:
#blue: #293448;
#red: #C1392B;
#import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
}
.headrow {
background: #blue;
}
.logo a {
color: #fff;
transition: 0.3s;
&:hover {
text-decoration: none;
color: #eee;
}
}
.topmenu {
text-align: right;
p {
margin-top: 10px;
a {
display: inline-block;
margin: 0 5px;
text-align: right;
}
}
ul {
margin-bottom: 0;
}
li {
display: inline-block;
margin-left: 30px;
a {
color: #eee;
display: block;
padding-bottom: 10px;
border-bottom: 3px solid transparent;
transition: 0.3s;
}
a:hover {
text-decoration: none;
border-bottom: 3px solid #red;
}
.dropdown-menu {
text-align: left;
li {
margin: 0;
display: block;
}
a:hover {
background: #ccc;
}
a {
color: #blue;
border: 0;
transition: 0;
}
}
}
}
.bannerrow {
img { width: 100%; height: auto;}
}
.servicerow {
color: #fff;
padding-bottom: 100px;
background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat;
background-size: cover;
header {
margin-top: 60px;
margin-bottom: 20px;
h2 { margin-bottom: 10px; }
p { font-size: 13pt; }
}
}
.column2-box {
border: 1px solid #ddd;
padding: 10px;
margin: 15px 0;
i { font-size: 110px; float: left; }
h3 { margin-top: 0; }
}
JS:
$(function() {
$('.dropdown-toggle').dropdown();
$('.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
});
var s = skrollr.init({forceHeight: false});
});
I am not sure which element makes the page too high.

skrollr.init({forceHeight: false});
https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.

Categories