We Keep Coding

How to change menu to responsive bootstrap menu

I want to use bootstrap 5 responsive menu in the example shown in codepen, i tried few thing but it keeps breaking one way or the way.
https://codepen.io/KGuide/pen/WNogyyV
I want to use bootstrap menu and replace the current one, so that menu is responsive with animation on hover for large screens.
<nav class="navbar navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, {xPercent: -50, x:innerWidth / 2});
nav.addEventListener("mousemove", function(e){
gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'});
});
nav.addEventListener("mouseleave", function(e){
gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`});
});
body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<div class="containerx nav-container">
<nav>
HOME
DINE
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
HOTELS
CONTACT
</nav>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!-- <nav class="navbar navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Offers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav> -->
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>

Here’s a version of your page using the navbar from Bootstrap 5.0 with the logo in the center for larger displays.
Update
In my original answer, I cheated on the layout by using two logos, one for mobile and one for larger displays to get the spacing around the four links and the logo to match the original request by using ‘justify-content-evenly.’ That did provide equal spaces between all of the items as well as between the edge of the browser and the first and last items, but it had duplicate content.
In my update, I use one logo and split the links between two navbar-collapse lists. Splitting the links into two separate navbar-collapse lists provides a place in the middle for the logo on large screens. I use order: 2 to move the logo from the left side of the navbar on small screens to the middle on wider screens.
The two navbar-collapse divs are set to expand to fit the available space using flex-grow-1. The ul lists in the navbar-collapse divs are set to w-100 and justify-content-evenly to space out the two links.
Because there are two navbar-collapse divs, I modified the navbar-toggler button to use a class value for data-bs-target rather than an id, and listed the ids for the two navbar-collapse divs for aria-controls="navbarContent1 navbarContent2" with a space between the two ids.
While the original question was about getting a Bootstrap 5 navbar to work to match an example, I also modified the setup for the Green Sock animation (GASP):
Added listeners for load, resize, orientation to configure or reconfigure the gasp setup.
Switched from innerWidth to document.documentElement.clientWidth – innerWidth includes the scrollbar in the width, which shifts the blob towards the right if there is a scrollbar. clientWidth avoids the problem.
Revised the svg path for the blob – the original was a little uneven.
const nav = document.querySelector(".navbar");
const blob = document.querySelector("svg.nav-blob");
function initiateBlob() {
gsap.set(blob, {
xPercent: -50,
x: document.documentElement.clientWidth / 2
});
}
nav.addEventListener("mousemove", function(e) {
gsap.to(blob, {
duration: 0.2,
x: e.clientX,
overwrite: 'auto'
});
});
nav.addEventListener("mouseleave", function(e) {
gsap.to(blob, {
duration: 0.1,
x: document.documentElement.clientWidth / 2,
overwrite: 'auto'
});
});
window.addEventListener('load', initiateBlob, false);
window.addEventListener('resize', initiateBlob, false);
window.addEventListener('orientationchange', initiateBlob, false);
body {
font-family: "Open Sans Condensed";
background: black;
}
h1 {
font-family: "Open Sans Condensed";
font-size: 2.2em;
font-weight: 600;
}
.logo {
max-width: 160px;
}
a.nav-link {
color: black;
text-decoration: none;
font-size: 20px;
font-family: "Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
}
.navbar-nav .nav-link {
padding-left: 1rem;
}
svg.nav-blob {
position: absolute;
top: 100%;
left: 0;
height: 20px;
z-index: 1;
display: none;
}
svg.nav-blob path {
fill: white;
}
#media (min-width:768px) {
.sr-md-only {
position: absolute;
left: -10000px;
top: auto;
overflow: hidden;
}
a.nav-link {
line-height: 70px;
}
.nav-item {
width: 6.75rem;
text-align: center;
}
.navbar-expand-md {
justify-content: space-evenly;
}
svg.nav-blob {
display: block;
}
.card-img, .card-img-top {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-light navbar-expand-md bg-white">
<div class="container-lg">
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" alt="Logo image" />
<button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target=".navbarContent" aria-controls="navbarContent1 navbarContent2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navbarContent1" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-1">
<ul class="navbar-nav w-100 justify-content-evenly">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DINE</a>
</li>
</ul>
</div>
<div id="navbarContent2" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-3">
<ul class="navbar-nav w-100 justify-content-evenly">
<li class="nav-item">
<a class="nav-link" href="#">HOTELS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
<svg class="nav-blob" viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 140 0 200 0 Z"></path>
</svg>
</div>
</nav>
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-12 col-md-6">
<div class="card bg-dark text-white text-center border-top-0">
<img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image">
<div class="card-img-overlay">
<h2 class="card-title"> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="card bg-dark text-white text-center border-top-0">
<img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12 vh-100">
<p>Section to give height to the page.</p>
</div>
</div>
</div>
I replaced the original images with same-size placeholder images.
How to handling the separate menu items for the mobile menu came from the answer to another question: Bootstrap 4 navbar with brand center and links on the left, center and right

You can make separate nav for desktop and mobile like the snippet below.
Thanks me later.
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, {xPercent: -50, x:innerWidth / 2});
nav.addEventListener("mousemove", function(e){
gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'});
});
nav.addEventListener("mouseleave", function(e){
gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`});
});
body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<div class="containerx nav-container">
<nav class="d-none d-lg-block">
HOME
DINE
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
HOTELS
CONTACT
</nav>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<nav class="navbar d-lg-none navbar-expand-lg navbar-light p-5">
<div class="container">
<a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png" alt="Logo"/></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">DONE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HOTELS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>

maybe this can help
i add jquery & css in media(767px)
i make popup animated menu on click of menu bar.
your navbar html structure is not proper for make menu responsive that
why i add extra menu for mobile for make responsive.
console.clear();
const nav = document.querySelector(".nav-container");
const blob = document.querySelector(".nav-container svg");
gsap.set(blob, { xPercent: -50, x: innerWidth / 2 });
nav.addEventListener("mousemove", function (e) {
gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" });
});
nav.addEventListener("mouseleave", function (e) {
gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` });
});
window.onresize = function () {
gsap.set(blob, { xPercent: -50, x: innerWidth / 2 });
nav.addEventListener("mousemove", function (e) {
gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" });
});
nav.addEventListener("mouseleave", function (e) {
gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` });
});
};
/*****For menu open*******/
$(document).ready(function () {
$('.menu-btn').click(function(event) {
$('.navbar-demo').toggleClass('open-nav');
});
});
body{font-family: "Open Sans Condensed"; background: black;}
h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}
.c-hotel h3 {font-size: 1.2em; font-weight: 600;}
.logo {max-width: 160px;}
.nav-container nav {
display: flex;
justify-content: space-around;
background:white;
height:100px;
}
.nav-container nav a {
color: black;
text-decoration: none;
font-size: 20px;
font-family:"Roboto";
font-weight: 600;
color: #358E9D;
text-transform: uppercase;
padding: 10px 20px 20px 20px;
line-height: 70px;
}
.nav-container{position: relative;}
.nav-container svg{
position: absolute;
top:100%;
left:0;
height:20px;
z-index: 1;
}
.nav-container path{
fill:white;
}
/*************************/
.navbar-demo button.menu-btn {
display:none;
}
header#header {
display: none;
}
/******responsive menu css*******/
#media only screen and (max-width: 767px){
header#header {
display: block;
}
nav.desktop-menu {
display: none;
}
.navbar-demo button.menu-btn {
position: absolute;
top: 0;
right: 0;
background-color: unset;
border: 0;
font-size: 26px;
display:block;
padding: 15px;
color: #000;
outline: none;
}
.navbar-demo{
height:100%;
z-index: 999;
}
.navbar-demo .nav-bar {
background-color: #ffff;
transition: 1s;
height: 100%;
position: fixed;
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 138% -20%);
-webkit-clip-path: circle(100px at 138% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.navbar-demo.open-nav .nav-bar{
clip-path: circle(1100px at 190% -10%);
-webkit-clip-path: circle(1100px at 90% -10%);
pointer-events: all;
}
.navbar-demo {
display: table;
width: 100%;
position: fixed;
z-index: 99;
}
.navbar-demo .nav-bar ul li {
display: block;
}
.navbar-demo .nav-bar ul {
padding: 0;
display: table;
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
margin: 0;
padding: 0;
}
.navbar-demo .nav-bar ul li a {
font-size: 18px;
display: inline-block;
text-align: center;
text-decoration: none;
color: #fff;
padding: 18px;
text-transform: uppercase;
}
.nav-bar {
text-align: center;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items: center;
position: relative;
}
.navbar-demo .nav-bar ul li a {
display: block;
color: #000;
}
.navbar-demo.open-nav button.menu-btn i:before {
content: '\f00d ';
}
.nav-container svg {
display: none;
}
.logo-main {
background-color: white;
}
.container-fluid.mb-3.mt-0.p-0 {
padding-top: 57px !important;
}
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght#300&family=Roboto:wght#300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="containerx nav-container">
<nav class="desktop-menu">
HOME
DINE
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
HOTELS
CONTACT
</nav>
<header id="header" class="navbar-demo">
<div class="logo-main">
<img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" />
</div>
<div class="nav-bar">
<ul>
<li>
HOME
DINE
HOTELS
CONTACT
</li>
</ul>
</div>
<button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button>
</header>
<svg viewBox="0 0 200 20">
<path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path>
</svg>
</div>
<div class="container-fluid mb-3 mt-0 p-0">
<div class="row gx-0">
<div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0">
<div class="card bg-dark text-white text-center shadow-sm rounded-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay d-flex align-items-center">
<h2 class="card-title text-center w-100 "> HEADING ONE</h2>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0">
<img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="...">
<div class="card-img-overlay">
<h2 class="card-title">HEADING TWO</h2>
<!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> -->
</div>
</div>
</div>
</div>
</div>

Bootstrap Carousel White-Background inbetween Slides

I'm having difficulty describing my problem so here's a video that should make it quite obvious: https://gph.is/g/4LXNKkg
Essentially I'm using a bootstrap carousel template to display a basic full-width slider. But unlike other sliders, I have created before (not with bootstrap) and regardless of the changes, I make to the code it just won't get rid of these ugly white-space transitions. Is there something obvious I'm missing here?
HTML: `
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="style.css" />
<header>
<div class="header-upper container-fluid d-flex flex-row justify-content-center">
<div class="logo m-3">
<img src="images/v.png" />
</div>
<div class="header-upper-text m-2">
<h1>This is the Title</h1>
<h3>This is the description</h3>
</div>
</div>
<div class="headder-middle">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</div>
</header>
<section class="header-slider">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/leaf-2210973_1920.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/wave-3473335_1920.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="images/wood-1350175_1920.jpg" class="d-block w-100" alt="..." />
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
<script>
var myCarousel = document.querySelector("#carouselExampleCaptions")
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 5000
})
</script>
`
CSS:
.selector-for-some-widget {
box-sizing: content-box;
}
a {
text-decoration: none !important;
color: #fff !important;
}
.logo img {
max-width: 100px;
max-height: 100px;
}
.header-upper {
background-color: lightblue;
}
.header-middle {
background-color: black;
}
.recent-posts {
background-color: rgba(0, 0, 0, 0.247);
position: relative;
text-align: center;
color: white;
}
.recent-posts-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.recent-posts-text p {
border-bottom: 1px solid #fff;
}
.recent-posts-info a {
color: #fff;
}
.recent-posts img {
object-fit: cover;
width: 100%;
height: 100%;
}
.carousel-inner {
height: 32rem;
}
.carousel-item {
float: none !important;
margin-right: 0 !important;
}
#media (min-width: 576px) {
.header-upper {
background-color: blue;
}
}
#media (min-width: 768px) {
.header-upper {
background-color: green;
}
}
#media (min-width: 992px) {
.header-upper {
background-color: orange;
}
}
#media (min-width: 1200px) {
.header-upper {
background-color: yellow;
}
}
#media (min-width: 1400px) {
.header-upper {
background-color: red;
}
}

that white-space transition are an animation of the class "slide" on Bootstrap 4.
In your main carousel div you are using that class.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
Just remove it and try it

: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.

How do I make this off canvas menu permanently display?

I'm using a off canvas navigation bar I found from a template and by default it is set to hide. I want it so that it completely takes the left side of the screen and no matter where the user scroll it will always "be there".
Can someone help me achieve this? Also any way I can make this mobile friendly by possibly making it collapse for smaller screens?
The "menu" button isn't appearing correctly but it is the long grey bar across the slideshow. I have a feeling it is in the css, so I made a comment as to where the css for the navbar begins.
https://jsfiddle.net/nv7rsgpg/9/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Stylish Portfolio - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom CSS -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/css/stylish-portfolio.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Side Menu */
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 0;
width: 250px;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
left: 0;
}
#sidebar-wrapper.active {
left: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
height: 100vh;
}
.vcenter {
position: absolute;
height:100px;
width:100%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
}
.v-center {
position: absolute;
height:100px;
width:40%;
top:50%;
bottom:50%;
margin-top: -50px;
margin-bottom: -50px;
left:15%;
}
</style>
</head>
<body>
<!-- Navigation -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">
<a href="#top" onclick = $("#menu-close").click(); >Start Bootstrap</a>
</li>
<li>
<a href="#top" onclick = $("#menu-close").click(); >Home</a>
</li>
<li>
<a href="#about" onclick = $("#menu-close").click(); >About</a>
</li>
<li>
<a href="#services" onclick = $("#menu-close").click(); >Services</a>
</li>
<li>
<a href="#portfolio" onclick = $("#menu-close").click(); >Portfolio</a>
</li>
<li>
<a href="#contact" onclick = $("#menu-close").click(); >Contact</a>
</li>
</ul>
</nav>
<header>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://lorempixel.com/460/345/cats" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/business" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/abstract" />
</div>
<div class="item">
<img src="http://lorempixel.com/460/345/transportation" />
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Stylish Portfolio is the perfect theme for your next project!</h2>
<p class="lead">This theme features some wonderful photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Services -->
<!-- The circle icons use Font Awesome's stacked icon classes. For more information, visit http://fontawesome.io/examples/ -->
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2>Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cloud fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-compass fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flask fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-shield fa-stack-1x text-primary"></i>
</span>
<h4>
<strong>Service Name</strong>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
Learn More
</div>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Callout -->
<aside class="callout">
<div class="text-vertical-center">
<h1>Vertically Centered Text</h1>
</div>
</aside>
<!-- Portfolio -->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h2>Our Work</h2>
<hr class="small">
<div class="row">
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-1.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-2.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-3.jpg">
</a>
</div>
</div>
<div class="col-md-6">
<div class="portfolio-item">
<a href="#">
<img class="img-portfolio img-responsive" src="img/portfolio-4.jpg">
</a>
</div>
</div>
</div>
<!-- /.row (nested) -->
View More Items
</div>
<!-- /.col-lg-10 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- Call to Action -->
<aside class="call-to-action bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</aside>
<!-- Map -->
<section id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</section>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h4><strong>Start Bootstrap</strong>
</h4>
<p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
<ul class="list-unstyled">
<li><i class="fa fa-phone fa-fw"></i> (123) 456-7890</li>
<li><i class="fa fa-envelope-o fa-fw"></i> name#example.com
</li>
</ul>
<br>
<ul class="list-inline">
<li>
<i class="fa fa-facebook fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-twitter fa-fw fa-3x"></i>
</li>
<li>
<i class="fa fa-dribbble fa-fw fa-3x"></i>
</li>
</ul>
<hr class="small">
<p class="text-muted">Copyright © Your Website 2014</p>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script>
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#]):not([href=#myCarousel])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>

Just add the active class to the sidebar-wrapper
<nav id="sidebar-wrapper" class="active">
and since you don't want to hide it ever, you can remove the menu-toggle link
<!-- REMOVE this -->
<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
And since the menu is always on, you need to move your body so that it is not covered up. For that you do this
body {
padding-left: 250px;
}
Note that because you are using a non-fluid container, this would cause the content to overflow if the screen / window is not large enough. You could work around this a bit by replacing all the containers with container-fluid, but your images are going to look stretched.
The right way would be to modify your responsive wrap points in your Bootstrap less files to account for the menu. But looking at the menu width being hardcoded, I doubt you are targeting smaller screens.
Fiddle with container - https://jsfiddle.net/9n8dtr5o/show
Fiddle with container-fluid - https://jsfiddle.net/z9Lknqn7/show