We Keep Coding

My navbar toggler arrow not working properly

I made a toggler button with an arrow icon (when menu show) and bars (when menu close), I have made the code as shown below. The problems I am facing are:
1.) When I first clicked the toggler, the 3 bar icons became arrows. But, when I click the toggler button again, it doesn't return to 3 bar icons. So, the toggler is incompatible when it is opened and closed. What should be, when the menu shows, the arrow icon appears and when the menu is closed that appears is the 3 bar icon.
2.) I've coded in CSS for the transitions in arrows, but it still doesn't work.
Can anyone help me?
function toggleMenu() {
if ($(".navbar-toggler").hasClass("collapsed")) {
$(".navbar-toggler").removeClass("active");
} else {
$(".navbar-toggler").addClass("active");
}
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

In your JQuery you are checking for the "collapsed" class which is unecessary in my eyes as you always hide or show the content when you click the toggler. So you can just switch to the toggleClass() function from Jquery. I changed your code and left a comment where i made the changes. If i understood you right this is what you want it to look like
function toggleMenu() {
// the check for the "collapsed" claass is unecessary, you can simply toggle the class
$(".navbar-toggler").toggleClass("active");
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

How to get Sub Nav Dropdown to only display when I hover over the menu text?

Right now I have a sub nav container inside of my "services" menu item. My issue is whenever I hover over the sub nav container, it will show up, but I only want it to display when I hover over the text "services".
I don't know how I am able to solve this because the entire sub nav is located inside of my services text li tags, so no matter where I hover, it always triggers it because everything is located inside of the li "services" tag
Here is a codepen showing issue. https://codepen.io/designextras/pen/RwrqzwN
I only want the sub nav to show when I hover over the text "services", You might have to refresh the screen multiple times to see the issue. If you just move the mouse across the blank white area, it will still trigger the sub nav because that div is being hovered over.
Here is the services li code with the sub nav code inside
<li id="services">Services
<div class="sub-nav" id="sub-nav">
<div class="sub-nav-col left">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
<div class="sub-nav-col right">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
</div>
</li>
I feel like the only way is to use Javascript and hard code the html through there, but that seems excessive and doesn't make sense for such a simple hover effect.
Let me know what you think

You can use simply display:none to hide your submenu and display:flex in active class to toggle the sub menu. In javascript, you are just using mouseenter event, here you can play with mouseover and mouseout event and make active class toggle on hover. anchor text display value should be inline block for better cursor position.
You can also make this hover functionality without javascript.
Just add this css in your css file.
#services:hover #sub-nav {
display: flex;
}
and remove JS code.
const services = document.querySelector('#services')
const subNav = document.querySelector('#sub-nav')
services.addEventListener('mouseenter', e => {
subNav.classList.add('active')
});
services.addEventListener('mouseout', e => {
subNav.classList.remove('active')
});
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
-webkit-font-smoothing: antialiased;
}
.global-header {
position: fixed;
top: 0;
width: 100%;
background: red;
z-index: 999;
}
.top {
}
.row {
display: flex;
align-items: center;
height: 80px;
padding: 0;
max-width: 1000px;
margin: 0 auto;
}
.global-logo {
display: inline-block;
}
.nav-menu {
display: inline-block;
vertical-align: top;
margin-top: 22px;
margin-left: 50px;
}
ul {
font-size: 13px;
line-height: 21px;
margin:0;
padding:0;
display: flex;
align-items: center;
}
li:first-child {
margin-left: 0;
}
li {
display: inline-block;
margin-left: 28px;
position: relative;
}
li > a {
font-size: 14px;
text-transform: uppercase;
letter-spacing: .5px;
text-decoration: none;
display: inline-block;
padding:0 0 22px 0;
}
.sub-nav {
background: blue;
border-radius: 5px;
box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2);
display: none;
left: -120px;
padding: 16px;
position: absolute;
top: 100%;
transition: .1s all ease-in-out;
width: 628px;
}
.active{
display: flex;
}
.sub-nav-col {
display: flex;
flex-direction: column;
flex: 1;
max-width: 50%;
background: red;
}
.left {
margin-right: 4px;
}
.right {
margin-left: 4px;
}
.sub-nav-box {
background: #FAFAFA;
border-radius: 3px;
display: flex;
flex: 0 1 auto;
flex-direction: column;
font-size: 14px;
justify-content: center;
margin: 4px 0;
min-height: 100px;
padding: 24px 14px 24px 96px;
position: relative;
transition: .1s all ease-in-out;
text-decoration: none;
}
.icon-background {
height: 64px;
width: 64px;
background: #252222;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 14px;
}
.icon {
color: #fff;
font-size: 20px;
}
.sub-nav-box h4 {
font-size: 12px;
letter-spacing: 0.9px;
line-height: 16px;
margin: 0 0 .5em;
padding: 0;
text-transform: uppercase;
}
.sub-nav-box p {
color: red;
line-height: 16px;
width: 100%;
}
.sub-nav::after {
bottom: 100%;
left: 140px;
content: '';
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border: solid transparent;
border-color: rgba(252,252,252,0);
border-bottom-color: #FCFCFC;
border-width: 20px;
border-radius: 2px;
margin-left: -20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown Nav Menu</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
</head>
<body>
<header class="global-header">
<div class="top">
<div class="row">
<div class="global-logo">
Logo
</div>
<nav class="nav-menu">
<ul>
<li>Home</li>
<li id="services">Services
<div class="sub-nav" id="sub-nav">
<div class="sub-nav-col left">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
<div class="sub-nav-col right">
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
<a href="/" class="sub-nav-box">
<div class="icon-background">
<i class="fas fa-user-lock icon"></i>
</div>
<h4>Sync and Organize</h4>
<p>Keep your notes handy</p>
</a>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
<script src="app.js"></script>
</body>
</html>

Centering a div and having issues

I am having issues centering this div which is being activated in JavaScript to show onclick of an <a> tag. It can be found at the bottom of the page with the text "This is a test" with a small padding background. Usually it would only appear with an onclick but I have disabled that for now.
I have tried justify-content and all the usuals (I think). I have a feeling that a parent tag is interfering with it and giving it CSS that I don't want it to. I have used Inspect Element to no avail in finding this, if it is the case.
Any advice would be appreciated.
Thanks.
var mouseFollowX = 0,
mouseFollowY = 0,
x = 0,
y = 0,
friction = 2 / 30;
function backgroundMover() {
x += (mouseFollowX - x) * friction;
y += (mouseFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.3)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(backgroundMover);
}
$('.wrap').on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
mouseFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
mouseFollowY = (10 * lMouseY) / 100;
});
backgroundMover();
function showDevFunction() {
var getDev = document.getElementById("showDev");
if (getDev.style.display === "block") {
getDev.style.display = "none";
} else {
getDev.style.display = "block";
}
}
#mainnav {
background-color: #FBFBFB;
}
h1 {
margin-bottom: 0;
padding: 0;
}
.header-brand {
margin-bottom: -8px;
margin-top: 0;
margin-right: 20px;
}
h1.header-brand {
margin-right: 25px;
margin-top: -10px;
margin-left: 20px;
}
.nav-bg {
padding: 33px;
margin: 0;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
}
h1.hero-heading {
color: white;
position: absolute;
padding-left: 15%;
top: 0.70em;
left: -0.75em;
line-height: 0.8;
font-family: Roboto, sans-serif;
font-size: 10vh;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-shadow: 3px 3px 5px black;
}
.hero-heading span {
padding-left: 0.5em;
}
h3.hero-content {
color: white;
position: absolute;
background-color: rgba(53, 79, 92, 0.50);
padding: 0.75em 0.75em 0.75em 15%;
top: 11em;
left: -0.75em;
line-height: 1.5em;
max-width: 76%;
font-family: Roboto Slab, serif;
font-size: 2.5vh;
font-weight: lighter;
font-style: normal;
}
.wrap {
width: 100%;
height: 55vh;
position: relative;
overflow: hidden;
margin-bottom: 35px;
}
.bg {
z-index: -1;
position: static;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
width: 100%;
height: 55vh;
transform: scale(1.3);
}
.cta {}
img.cta {
opacity: 100;
background: white;
-o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
/* ...and now override with proper CSS property */
transition: opacity .2s ease-out;
}
img.cta:hover {
opacity: 0;
}
.cf {}
.cf img {
position: absolute;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.cf img.top:hover {
opacity: 0;
}
.cta-sub {
position: relative;
margin-top: 200px;
}
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin: 275px 0 0 0;
}
#showDev {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Layouts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles/main.css" type="text/css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
</head>
<body>
<header class="navbar-inverse" role="banner">
<div id="mainnav">
<!-- Can change class="navbar-static-top", to class="navbar-fixed-top" to have nav stuck top -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<a class="header-brand" href="index.html"><img src="img\main\logo-text-web.png" height="100" width="408"></a>
<!-- <h1 class="header-brand">David Olijnyk <br>Webmaster Services</h1> -->
</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 mr-auto">
<li class="nav-item active">
<a class="nav-link nav-bg" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="wrap">
<div class="bg"></div>
<h1 class="hero-heading"> your <br> <span>solution</span></h1>
<div class="hero-content-box">
<h3 class="hero-content">Keep your most important business services in one place, with easy and frequent communication. Having an online presence has never been so easy and impactful. </h3>
</div>
</div>
<div class="container">
<div class="row">
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDevFunction()">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
<div class="show-more" id="showDev">
This is a test
</div>
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDev">
<img class="cta bottom rounded" src="img/home/photo-more.png">
<img class="cta top rounded" src="img/home/photo.png">
</a>
<a href="#" class="cf col-4 d-flex justify-content-center">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
</div>
<div class="row cta-sub">
<h3 class="cf col-4 d-flex justify-content-center">Webmaster</h3>
<h3 class="cf col-4 d-flex justify-content-center">Photography</h3>
<h3 class="cf col-4 d-flex justify-content-center">Graphic Design</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>

The only block with position:relativeis the .wrap so #showDev is positioned relatively to the body.
Add the following position:relative to the .container element and #showDev will do 80% of this block.

I would use margin:auto and text-align: center.
.nameOfTheDiv{
margin: auto;
text-align: center;
}
This will help to position your div in the center.

In your show-more class you are using margin-left: auto; and margin-right: auto;. But again you have used margin: 275px 0 0 0;
which is manipulating the previously set values. Additionally, you have to add left: 0; and right: 0; with it.
So, change it like below:
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin-top: 275px;
left: 0;
right: 0;
}

In case you are looking for something to center the div like an alert box
div {
position: absolute;
margin: auto;
max-width: 300px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

I want the side bar display first and collapse after clicking the button and adding the dropdown to the side of the menu items using bootstrap

I want the side bar menu using bootstrap.
I want to hide the menu even in the large screen by clicking the button.
When collpasing to the left side menu icons should display on the left side.
Inside the menu item by clicking it dropdown to the side.
Please tell me the solution.
I tried using the css and bootstrap and jquery. It is not working.
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li>
<a href="#anch2">
<span class="fa fa-anchor solo">Anchor 2</span>
</a>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I added some jquery code and chaged this block of your code. rest of the code is same.
Also don't forget to add jquery, font-awesome, and bootstrap cdn in your code. (as included in the snippet below)
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
$(document).ready(function () {
$("a#menu-toggle").click(function (){
$("#wrapper").toggleClass("active");
});
});
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
.dropdown,.sidebar-nav,#id,#sidebar-wrapper{
overflow:visible;
}
.dropdown>.dropdown-menu{
position:absolute;
top:0;
left:100%;
z-index:100;
background-color:black;
margin:0;
padding:0;
border:none;
border-radius:0;
}
.dropdown>.dropdown-menu>li>a{
line-height:45px;
color:white;
background-color:black;
}
.dropdown>.dropdown-menu>li>a:hover{
background: rgba(255,255,255,0.2);
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li class="dropdown">
<span class="fa fa-anchor solo">Anchor 2</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

fix show hide panle in scroll page

I design show/hide panel using bootstrap like this:
HTML:
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
.content {
height: 1000px;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sidebar-nav {
margin-left: -250px;
width: 250px;
z-index: 10001;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
height: 100vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-color: #fafafa;
border-right: 1px solid #ccc;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sideBarCloseIcon {
float: right;
cursor: pointer;
}
.backdrop {
height: 100vh;
width: 100%;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav .list-group-item {
background-color: transparent;
border: 0px;
cursor: pointer;
}
.sidebar-nav .list-group {
margin-left: -15px;
margin-right: -15px;
}
.sidebar-nav .list-group hr {
margin-top: 0px;
margin-bottom: 0px;
}
.list-group-item-icon {
padding-right: 5px;
}
#hamburgerMenu {
cursor: pointer;
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
background-color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation" style="margin-bottom: -20px">
<div class="container-fluid">
<div class="navbar-header">
<a id="hamburgerMenu" class="navbar-brand"><span
class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
<a class="navbar-brand">Slide Panel</a>
</div>
</div>
<!--/.container-fluid -->
</div>
<div class="backdrop"></div>
<div id="mySideBar" class="sidebar-nav container-fluid" aria-label="...">
<div class="row">
<div class="col-xs-12" style="padding: 5px 15px 1px 15px">
<h4 style="padding-left: 0px; font-size: 19px; color: #666">
WorkPanel <span
class="sideBarCloseIcon glyphicon glyphicon-remove"
aria-hidden="true"></span>
</h4>
</div>
</div>
<hr style="margin: 5px -15px" />
<ul class="list-group">
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-user" aria-hidden="true"></span>My Profile
</li>
<li class="list-group-item"><span class="badge">2</span>
<i class="fa fa-newspaper-o list-group-item-icon"></i>News</li>
<hr />
<li class="list-group-item">
<i class="fa fa-question list-group-item-icon"></i>
<span class="badge">2</span> Forum</li>
<li class="list-group-item">
<i class="fa fa-users list-group-item-icon"></i>
<span class="badge">2</span> Teams</li>
</ul>
<hr style="margin: 5px -15px" />
<form class="form-inline">
<div class="form-group" style="width: 181px">
<label for="exampleInputName2">Search Here</label>
<input type="text" class="form-control" id="exampleInputName2" style="width: 100%" placeholder="Enter Text Here">
</div>
<button style="margin-top: 24px; padding: 9px;" type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
<hr style="margin: 5px -15px" />
<div>
<strong>Need Help ? Contact Us</strong>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-envelope list-group-item-icon"></i>Mail</li>
<li class="list-group-item"><i class="fa fa-phone list-group-item-icon"></i>Phone</li>
</ul>
</div>
</div>
<div class="content">
######
</div>
Now In Action work for me But when I Scroll page My Panel in scroll move to top. I need to fix my panel to top in scroll. how do fix This problem?
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
Demo : https://jsfiddle.net/9m7m756a/

You can use fixed positioning just like:
#mySideBar {
position: fixed;
}
Or checkout this Fiddle.
Hope this helps!