We Keep Coding

Bootstrap Navbar links overlap when resizing the browser

I made Bootstrap Navbar logo in the middle. Here is a picture of the result:
however i have 1 issue:
when i resize the browser, the nav links seems to overlap on each other.
what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?
here is HTML and CSS
html,
body {
height: 100%;
width: 100%;
font-family: 'Arial', 'Poppins', sans-serif;
background-color: #2d2d2d;
margin: 0;
}
.navbar {
width: 100%;
z-index: 999;
background: #2d2d2d;
;
margin-top: 0;
padding: 2em;
/* display: flex; */
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-brand {
transform: translateX(-50%);
left: 50%;
top: .1%;
position: absolute;
}
.navbar-nav li {
padding-right: 40px;
font-family: 'Myriad Pro';
font-weight: bold;
/* display: inline-block; */
}
#mt-nav-left {
position: absolute;
transform: translateX(60%);
right: 60%;
}
#mt-nav-right {
position: absolute;
transform: translateX(-65%);
left: 65%;
}
#banner {
overflow: auto;
z-index: 998;
}
#banner img {
width: 100%;
object-fit: cover;
}
#media (max-width: 1024px) {
#mt-nav-right {
position: static;
}
}
#media (max-width: 991px) {
#mt-nav-left {
position: relative;
}
#mt-nav-right {
position: relative;
}
}
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggle">
<i class="fas fa-bars" style="font-size: 21px;"></i>
</span>
</button>
<a class="navbar-brand" href="index.html">
<img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto" id="mt-nav-left">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto" id="mt-nav-right">
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>

You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties
flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);
Look at the snippet that I made.
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menu {
width: 100%;
}
.menu .navbar-nav {
flex-grow: 1;
}
/*
THIS CLASS PREVENTS OVERLAPING
*/
.menu .separator {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
max-width: 250px;
background: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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">
<div class="d-flex menu">
<ul class="navbar-nav mr-auto justify-content-end">
<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="#">Link</a>
</li>
</ul>
<!-- Box that prevents overlaping -->
<div class="separator">
</div>
<ul class="navbar-nav mr-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="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>

This is my approach for a navbar with your specifications using Bootstrap 4.
1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).
2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.
This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...
.navbar {
z-index: 999;
background: #2d2d2d;
}
.navbar .nav-link:hover {
color: rgba(255, 185, 197, 0.986) !important;
}
.navbar-nav li {
font-family: 'Myriad Pro';
font-weight: bold;
}
#media (min-width: 768px) {
.navbar {
max-height: 75px;
}
.navbar-brand {
bottom: -30px;
position: relative;
}
}
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
<span class="toggle">
<i class="fas fa-bars" style="font-size:21px;"></i>
</span>
</button>
<div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
<ul class="navbar-nav">
<li class="nav-item p-2">
<a class="nav-link scroll" href="index.html">
HOME <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">ABOUT</a>
</li>
</ul>
</div>
<a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
<img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
</a>
<div class="navbar-collapse collapse dual-nav order-2 order-md-3">
<ul class="navbar-nav">
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">CONTACT</a>
</li>
<li class="nav-item p-2" id="mt-navbar-link">
<a class="nav-link scroll" href="#">VACANCIES</a>
</li>
</ul>
</div>
</nav>

Bootstrap 4 grid columns not assuming max height

I am using Bootstrap 4 to construct a grid of rows and columns. Mostly everything is laid out as I like it, except for the 3 columns on the bottom left area, which I cannot get to automatically grow to the maximum height of the row they are place within. I have added a border to every row and column for demonstration, and I've added a blue background to the columns that will not automatically resize to the full possible height. I've tried everything I can think of, and can't quite get the columns to automatically grow to the full height.
I will normally have charts.js charts in the 3 columns, and when they don't grow to fill the entire height of the column, the charts get squished and look bad. Any help would be extremely appreciated!
I've constructed a (hopefully) full codepen example here:
https://codepen.io/coldcoffeecup/pen/aGgpoV

While Bootstrap's row comes with display: flex, unfortunately the columns do not. As such, if you simply want to make the blue squares expand to fill the full vertical space, all you need to do is add the following CSS:
#A {
display: flex;
flex-direction: column;
}
This can be seen working here.
.hovereffect {
width: 100%;
height: 100%;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.hovereffect img {
display: block;
position: relative;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
background: rgba(0, 0, 0, 0.6);
-webkit-transform: translatey(-100px);
-ms-transform: translatey(-100px);
transform: translatey(-100px);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
padding: 10px;
}
.hovereffect a.info {
text-decoration: none;
display: inline-block;
text-transform: uppercase;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
margin: 50px 0 0;
padding: 7px 14px;
}
.hovereffect a.info:hover {
box-shadow: 0 0 5px #fff;
}
.hovereffect:hover img {
-ms-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.hovereffect:hover .overlay {
opacity: 1;
filter: alpha(opacity=100);
}
.hovereffect:hover h2,
.hovereffect:hover a.info {
opacity: 1;
filter: alpha(opacity=100);
-ms-transform: translatey(0);
-webkit-transform: translatey(0);
transform: translatey(0);
}
.hovereffect:hover a.info {
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.fullwidth {
width: 100% !important;
}
.fullheight {
height: 100% !important;
}
#A {
display: flex;
flex-direction: column;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="assets/images/favicon.ico">
<title>Template</title>
<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/starter-template.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/css/bootstrap-slider.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" id="reportDropdown" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Account</button>
<button class="dropdown-item" id="sign-out" type="button">Sign Out</button>
</div>
</div>
</div>
</nav>
<main role="main" class="container-fluid">
<div class="starter-template">
<h1 class="display-4">Title</h1>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-9 border" id="A">
<div class="row border" id="A1">
<div class="col-3 border">
<div class="row">
<div class="dropdown fullwidth">
<button class="btn btn-secondary dropdown-toggle fullwidth" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Type
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#!">A</a>
<a class="dropdown-item" href="#!">B</a>
<a class="dropdown-item" href="#!">C</a>
</div>
</div>
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 1
</p>
</div>
<input id="slider1" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 2
</p>
</div>
<input id="slider2" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
<div class="row border" style="padding:5% 10% 5% 10%;">
<div class="fullwidth">
<p class="lead text-muted text-center">
Slide 3
</p>
</div>
<input id="slider3" type="text" class="span2" value="" data-slider-min="10" data-slider-max="1000" data-slider-step="5" data-slider-value="[10,450]" />
</div>
</div>
<div class="col border">
A4
</div>
</div>
<div class="row bg-primary d-flex flex-fill" id="A2">
<div class="col-4 border">
<canvas id="chart1"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart2"></canvas>
</div>
<div class="col-4 border">
<canvas id="chart3"></canvas>
</div>
</div>
</div>
<div class="col border" id="B">
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
A
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
B
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
C
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
D
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
E
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
F
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
G
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
H
<span>
<i class="fa fa-plus-square-o" aria-hidden="true"></i>
</span>
</li>
</ul>
</div>
<div class="row border">
<div class="input-group input-group-sm">
<input type="text" placeholder="Enter a value" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
<div class="input-group-append">
<button class="btn btn-secondary btn-sm" type="button">Add</button>
</div>
</div>
</div>
<div class="row border">
<ul class="list-group fullwidth">
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
I
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
J
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
<li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
K
<span><i class="fa fa-minus-square-o" aria-hidden="true"></i></span>
</li>
</ul>
</div>
<div class="row border" style="padding:3%">
<button type="button" class="btn btn-primary fullwidth">Done</button>
</div>
</div>
</div>
</div>
</main>
<!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script>
window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="assets/js/vendor/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.2/bootstrap-slider.js"></script>
<script src="assets/js/slider.js" rel="stylesheet"></script>
<script src="assets/js/chartCode.js" rel="stylesheet"></script>
<script src="assets/js/create.js" rel="stylesheet"></script>
</body>
</html>

I had the fix navigation dropdown menu on hover as explained below

I want to change the background of nav item on dropdown when they are clicked. and also in screen resolution less than 992px the nav menu appears after clicking toggle button but thats not the problem, the problem is that the submenus in dropdown are in such a way that it is difficult to understand whoose submenu is displaying. I want to fix this.
this following is my html code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- bootstrap link -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="css/custom.css">
<!-- JQuery3.2.1 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<!-- Trekking In Nepal -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Trekking in Nepal
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Annapurna Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Annapurna Circuit</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Annapurna Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Upper Mustang</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Everest Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Jiri to Everest Base Camp</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Everest Three Pass</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Langtang Region</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Helambu</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#"> Langtang Gosaikunda Lake</a>
</li>
<li>
<a class="dropdown-item submenuNav " href="#">Langtang Valley</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
This following is what i write in custom.css
.navbar-collapse .navbar-nav .dropdown .dropdown-menu{
margin-left: 0px !important;
margin-top: 0px !important;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
.dropdown:hover>.dropdown-menu{
display: block;
}
.dropdown-submenu:hover>.dropdown-menu{
display: block;
}
#media only screen and (max-width: 991px) {
.dropdown-submenu a::after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
transition: all 0.3s ease-in-out 0s;
}
}
.submenuNav{
opacity: 0.8;
margin-right: 3px;
}
.submenuNav:hover{
opacity: 1;
transform: translateX(3px);
transition: 0.4s all ease;
margin-right: 0px;
}
.dropdown-item{
background-color: none !important;
color: #007bff;
opacity: 0.8;
}
.dropdown-item:hover{
background-color: none !important;
color: #007bff;
opacity: 1;
transition: 0.2s all ease;
}
.customNav{
background-color: none !important;
color:#007bff !important;
}
.navbar .navbar-toggler .navbar-toggler-icon{
background-color: #007bff;
}
This following is js file I write in custom.js
$(document).ready(function(){
$(".dropdown-item").click(function(){
$(this).addClass("customNav");
});
});

You are saying:
I want to change the background of nav item on dropdown when they are clicked
In this case, you need to change/set the active css selector for the a tags like so:
.dropdown-submenu a:active {
background-color: yellow;
}
More info:
https://www.w3schools.com/cssref/sel_active.asp

submenu is not positioning as desired

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

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

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

Bootstrap collapseable menu closing all other submenus when opening one

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

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