We Keep Coding

Bootstrap multilevel dropdowns not automaticly closed

I use bootstrap multilevel dropdowns. It works all fine, but I don't know, how can I show only one child at same time.
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">Size6</span></a>
<ul class="dropdown-menu">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size5</a>
<ul class="dropdown-menu">
<li>5555555555555555555555555</li>
<li>5555555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555555</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size4</span></a>
<ul class="dropdown-menu">
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size3</a>
<ul class="dropdown-menu">
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size2</a>
<ul class="dropdown-menu">
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size1</a>
<ul class="dropdown-menu">
<li>111111111111111111</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script>
Full code example is here.
When I click from Size6 to Size5, it shows both dropdowns. I want close current submenu, when I switch from one dropdown menu to other. Bellow in image I show the problem, when i clicked on all submenus:

Hide the siblings on a.test click.
$(document).ready(function() {
$('.dropdown-submenu a.test').on("click", function(e) {
$(this).next('ul').toggle();
$(this).parent('li').siblings('li').find('ul:visible').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<h2>Multi-Level Dropdowns</h2>
<p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
<p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" href="#">Size6</span></a>
<ul class="dropdown-menu">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size5</a>
<ul class="dropdown-menu">
<li>5555555555555555555555555</li>
<li>5555555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555</li>
<li>55555555555555555555555555</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size4</span></a>
<ul class="dropdown-menu">
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size3</a>
<ul class="dropdown-menu">
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size2</a>
<ul class="dropdown-menu">
<li>22222222222222</li>
<li>22222222222222</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="test" href="#">Size1</a>
<ul class="dropdown-menu">
<li>111111111111111111</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

Is this what you were looking for something like this Dropdown with sub-menu and nested sub-menus
(function($) {
$(document).ready(function() {
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
li.main{
padding:20px;
border:1px solid grey;
display:inline-block
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #555;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<li class="dropdown main">
Dropdown A <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown 1</li>
<li><a>Dropdown 2</a></li>
<li>Dropdown 3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown 4
<ul class="dropdown-menu">
<li>Dropdown Submenu 4.1</li>
<li>Dropdown Submenu 4.2</li>
<li>Dropdown Submenu 4.3</li>
<li>Dropdown Submenu 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
Dropdown 5
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.1</li>
<li>Dropdown Submenu 5.2</li>
<li>Dropdown Submenu 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.1</li>
<li>Dropdown Submenu 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.3.1</li>
<li>Dropdown Submenu 5.4.3.2</li>
<li>Dropdown Submenu 5.4.3.3</li>
<li>Dropdown Submenu 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu 5.4.4.1</li>
<li>Dropdown Submenu 5.4.4.2</li>
<li>Dropdown Submenu 5.4.4.3</li>
<li>Dropdown Submenu 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown main">
Dropdown B <b class="caret"></b>
<ul class="dropdown-menu">
<li>Dropdown Link 1</li>
<li>Dropdown Link 2</li>
<li>Dropdown Link 3</li>
<li class="dropdown dropdown-submenu">
Dropdown Link 4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 4.1</li>
<li>Dropdown Submenu Link 4.2</li>
<li>Dropdown Submenu Link 4.3</li>
<li>Dropdown Submenu Link 4.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
Dropdown Link 5
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.1</li>
<li>Dropdown Submenu Link 5.2</li>
<li>Dropdown Submenu Link 5.3</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
Dropdown Submenu Link 5.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.1</li>
<li>Dropdown Submenu Link 5.4.2</li>
<li class="divider"></li>
<li class="dropdown dropdown-submenu">
Dropdown Submenu Link 5.4.3
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.3.1</li>
<li>Dropdown Submenu Link 5.4.3.2</li>
<li>Dropdown Submenu Link 5.4.3.3</li>
<li>Dropdown Submenu Link 5.4.3.4</li>
</ul>
</li>
<li class="dropdown dropdown-submenu">Dropdown Submenu Link 5.4.4
<ul class="dropdown-menu">
<li>Dropdown Submenu Link 5.4.4.1</li>
<li>Dropdown Submenu Link 5.4.4.2</li>
<li>Dropdown Submenu Link 5.4.4.3</li>
<li>Dropdown Submenu Link 5.4.4.4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</body>
</html>

Mobile menu dropdown issue

Here is my website: http://lowandheavy.com
The problem is that when website opens in mobile the 2nd menu with name "women" not working like menu "men".
It opens the dropdown but redirecting immediately to the submenu 3. Here is the code:
<ul class="nav-menu navigation-tier navigation-tier-primary" data-navigation-tier-primary>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/" >Home</a>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Men</a>
<div class="dropdown-content">
Tanks
T-shirts
</div>
</li>
<li class="dropdown has-slide-out header-navigation-item navigation-item-primary">
<a class="dropbtn navigation-link-primary" href="#">Women</a>
<div class="dropdown-content">
Leggings
Tanks
T-shirts
V-Neck
Unisex Tees
</div>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/hats/" >Hats</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/about/" >About</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/contact-us/" >Contact</a>
</li>
<li class="has-slide-out header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="/news-feed/" >News</a>
</li>
</ul>

Lets DO the same on click
/***Add css in file***/
.dropdown.active .dropdown-content {
display: block;
}
/***Add Jquery in file***/
$('.navigation-link-primary').click(function(e){
$('.dropdown').removeClass('active');
$(this).parent().addClass('active');
});

By clicking on the menu name Men then same time click on menu name women you are facing issue that its not staying its redirecting
It is not the issue
It is happening because when you click on menu "Men" It opens a submenu of Men. then same time clicking on woman submenu of woman open and submenu of "Men" close so gap reduce between Men and Woman in directly you clicked upon one of the submenu of "Woman" (Maybe 2nd or 3rd submenu) not clicked upon the "Woman" menu and you are getting redirected.
Check below snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
<ul class="nav">
<li>Link 1</li>
<li>Link 2 (toggle)
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-1">
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.3</li>
</ul>
</li>
<li>Link 3 (toggle)
<ul class="nav collapse" id="submenu2" role="menu" aria-labelledby="btn-1">
<li>Link 3.1</li>
<li>Link 3.2</li>
<li>Link 3.3</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
If you are directly open "woman" menu then you will not see your issue because at that time Submenu of "Men" menu is not open

$('.dropbtn.navigation-link-primary').click(function(e){
if($(this).hasClass('active')) {
$("a.dropbtn.navigation-link-primary").removeClass('active');
}
else {
$(this).addClass('active');
}
});
#media(max-width:850px) {
.dropdown:hover .dropdown-content {
display: none !important;
}
body.home .main-header-menu .header-navigation-item a {
width: 100% !important;
display: inline-block;
}
a.dropbtn.navigation-link-primary.active+div {
display: block !important;
}
}

Depend of screen size, merge menu's items to dropdown. Without jquery

For example I have menu with items:
1)
When I change browser's size, two last items merged two 1 dropdown
2)
3)
I need something like this. I have got Contacts_France | Contacts_Germany and when size will be decreased they are should be merged to one dropdown with name Contacts
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MAx-nax</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact_France</li>
<li>Contact_Germany</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</body>
</html>

A JSfiddle to easy resizable ability. Right now, there's some crazy switching in the more menu during the resize event. I have no idea why it's happening...
EDIT: Able to solve with #Santiago Rebella's solution here.
JSfiddle
var tele = document.getElementById('teleporter'),
rec = document.getElementById('receiver');
window.onresize = resize;
resize();
function resize() {
const rChildren = rec.children;
let numW = 0;
[...rChildren].forEach(item => {
item.outHTML = '';
tele.appendChild(item);
})
const teleW = tele.offsetWidth,
tChildren = tele.children;
[...tChildren].forEach(item => {
numW += item.offsetWidth;
if (numW > teleW) {
item.outHTML = '';
rec.appendChild(item);
}
});
}
#teleporter {
height: 20px;
overflow: hidden;
box-sizing: border-box;
padding: 0;
}
li {
float: left;
padding: 0 10px;
box-sizing: border-box;
list-style: none;
}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul id="teleporter">
<li>List item 0</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
<li>List item 8</li>
<li>List item 9</li>
<li>List item 10</li>
<li>List item 11</li>
<li>List item 12</li>
<li>List item 13</li>
</ul>
<div>More:
<ul id="receiver"></ul>
</div>
</div>
</div>
</nav>

<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
Logo
<button data-toggle="collapse" data-target="#navbar-collapse" class="navbar-toggle collapsed">
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">`enter code here`
<li role="presentation">Germany</li>
<li role="presentation">France</li>
<li role="presentation">Poland</li>
<li role="presentation">Czech Republic</li>
<li role="presentation">Romania</li>
<li role="presentation">Moldova</li>
<li role="presentation" class="dropdown hidden-xs hidden-lg hidden-md">
<a class="dropdown-toggle" data-toggle="dropdown">Western Europe<b class="caret"></b></a>
<ul class="dropdown-menu hidden-xs hidden-lg hidden-md">
<li role="presentation">Germany</li>
<li role="presentation">France</li>
</ul>
</li>
<li role="presentation" class="dropdown hidden-xs hidden-lg hidden-md">
<a class="dropdown-toggle" data-toggle="dropdown">East Europe<b class="caret"></b> </a>
<ul class="dropdown-menu hidden-xs hidden-lg hidden-md">
<li role="presentation">Poland</li>
<li role="presentation">Czech Republic</li>
<li role="presentation">Romania</li>
<li role="presentation">Moldova</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li role="presentation">Name</li>
<li role="presentation"></li>
<li role="presentation"><i class="glyphicon glyphicon-wrench"></i> </li>
<li role="presentation"><i class="glyphicon glyphicon-log-out"></i> </li>
<li role="presentation">Setting</li>
<li role="presentation">Log out</li>
</ul>
</div>
</div>
</nav>
<br/>
</header>

How to use this code for it.
var tele = document.getElementById('teleporter'),
rec = document.getElementById('receiver');
window.onresize = resize;
resize();
function resize() {
const rChildren = rec.children;
let numW = 0;
[...rChildren].forEach(item => {
item.outHTML = '';
tele.appendChild(item);
})
const teleW = tele.offsetWidth,
tChildren = tele.children;
[...tChildren].forEach(item => {
numW += item.offsetWidth;
if (numW > teleW) {
item.outHTML = '';
rec.appendChild(item);
}
});
}
#teleporter {
height: 20px;
overflow: hidden;
box-sizing: border-box;
padding: 0;
}
li {
float: left;
padding: 0 10px;
box-sizing: border-box;
list-style: none;
}
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul id="teleporter">
<li>List item 0</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
<li>List item 8</li>
<li>List item 9</li>
<li>List item 10</li>
<li>List item 11</li>
<li>List item 12</li>
<li>List item 13</li>
</ul>
<div>More:
<ul id="receiver"></ul>
</div>
</div>
</div>
</nav>

Sub menu on hover over navbar link in bootstrap

I want to to implement a feature in my bootstrap project like whenever someone will hover over my one of navbar links, it will display a detailed menu vertically like a menu in image below
I know how to make dropdown on hover over navbar link, but how can i populate this type of sub menu on hover.
Is already there any tutorial or example exists then do share with me.
If not then share idea!
Thanks!
Html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

I have tried this, You can use below code :
HTML :
<nav class="navbar navbar-default navbar-static">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-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>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truth</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Panda</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-6">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-6">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Some link
</li>
<li class="dropdown dropdown-large">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Sword of Truths</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li class="dropdown-header">Theme/Character</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">by brand</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li>Example</li>
<li class="divider"></li>
<li><img class"img-responsive" src="http://placehold.it/200x150"/></li>
</ul>
</li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</nav>
CSS :
#import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body{
font-family: 'Lato', sans-serif;
font-weight:300;
}
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight:300;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
#media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
Fiddle is here Click here

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
color: #222;
padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
font-size: 18px;
color: #ff3546;
padding: 5px 60px 5px 5px;
line-height: 30px;
}
.carousel-control {
width: 30px;
height: 30px;
top: -35px;
}
.left.carousel-control {
right: 30px;
left: inherit;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
font-size: 12px;
background-color: #fff;
line-height: 30px;
text-shadow: none;
color: #333;
border: 1px solid #ddd;
}
</style>
<div class="container">
Toggle navigation
My Store
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown mega-dropdown">
Men <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Men Collection</li>
<div id="menCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#menCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#menCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown">
Women <span class="caret"></span>
<ul class="dropdown-menu mega-dropdown-menu">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Features</li>
<li>Auto Carousel</li>
<li>Carousel Control</li>
<li>Left & Right Navigation</li>
<li>Four Columns Grid</li>
<li class="divider"></li>
<li class="dropdown-header">Fonts</li>
<li>Glyphicon</li>
<li>Google Fonts</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Plus</li>
<li>Navbar Inverse</li>
<li>Pull Right Elements</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Much more</li>
<li>Easy to Customize</li>
<li>Calls to action</li>
<li>Custom Fonts</li>
<li>Slide down on Hover</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Women Collection</li>
<div id="womenCollection" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/254x150/3498db/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 1">
<h4><small>Summer dress floral prints</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/ff3546/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 2">
<h4><small>Gold sandals with shiny touch</small></h4>
<button class="btn btn-primary" type="button">9,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
<div class="item">
<img src="http://placehold.it/254x150/2ecc71/f5f5f5/&text=New+Collection" class="img-responsive" alt="product 3">
<h4><small>Denin jacket stamped</small></h4>
<button class="btn btn-primary" type="button">49,99 €</button> <button href="#" class="btn btn-default" type="button"><span class="glyphicon glyphicon-heart"></span> Add to Wishlist</button>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#womenCollection" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#womenCollection" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
<li class="divider"></li>
<li>View all Collection <span class="glyphicon glyphicon-chevron-right pull-right"></span></li>
</ul>
</li>
</ul>
</li>
<li>Store locator</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
My account <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>My cart (0) items</li>
</ul>
</div><!-- /.nav-collapse -->
<script>
$(document).ready(function(){
$(".dropdown").hover(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
</script>
for more visite enter link description here

This may be an option, you just need to adjust the margin and padding to your needs.
Hope it helps. ;)
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.dropdown-menu-fixed {
margin: 0;
padding: 0;
height: auto;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 0;
min-height: 1px;
float: none;
width: 100%;
}
.dropdown-menu-fixed > ul li {
padding: 3px 20px;
}
.dropdown-menu-fixed a {
display: block;
text-decoration: none;
}
.dropdown-header {
font-weight: bold;
font-size: 13px;
}
#media (min-width: 768px) {
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.dropdown-menu-fixed {
position: fixed;
top: 50px;
width: 100%;
background-color: #fff;
}
.dropdown-menu-fixed > ul {
position: relative;
margin: 1rem 0 0;
padding: 0 0 1rem 60px;
min-height: 1px;
float: left;
width: 33.33333333%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Personal
<span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-fixed">
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
<ul class="list-unstyled">
<li class="dropdown-header">Dropdown header</li>
<li><a class="small" href="#">Action</a></li>
<li><a class="small" href="#">Another action</a></li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

try this, it should work for desktop as well as mobile views:
$(document).ready(function(){
$(".dropdown").hover(
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
},
function () {
if (!$($(this).parents()[3]).find('.navbar-toggle').is(":visible")) {
$(this).find('.dropdown-toggle').trigger('click');
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

CSS Bootstrap - Align Navbar 'Icons' with edge of jumbotron

I am trying to align the selections in the navbar with the edges of the jumbotron, so that the rapidcodes logo aligns with the edge of the grey box in 'Newest Additions' and the 'login' button aligns with the right edge of the grey box.
See screenshot of current page:
Code:
td {
text-align: left;
vertical-align: central;
padding: 4px;
}
.products {
display: inline-block;
margin: 15px;
}
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>

Try packing your code inside the external div with the class of 'container'.
<div class="container"><!--Pack your code inside the container-->
<nav class="navbar navbar-default" >
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.rapidcodes.co.uk"><img src="http://www.rapidcodes.co.uk/style/logo.png" width="200" height="25" alt="Logo"/></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Xbox<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PlayStation<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Memberships</li>
<li>Gift Cards</li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">PC<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Games</li>
<li>Time Cards</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
</div><!--end container-->

Your content probably has a container .container. Also wrap your navbar with this.