We Keep Coding

How can I get this blend mode effect on hero image and also fix the navigation menu opacity?

I am trying to achieve this blend mode effect on hero image and transparent navbar with that disolve into the hero image. I tried to make transparent navbar by giving a background color and some opacity, but it doesnt look same as what I want.
What I have so far is this:
and here's the code for that:
Any help would be greatly appreciated. Thank you.
.navbar {
background: #000000 0% 0% no-repeat padding-box;
opacity: 0.56;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
#media screen and (max-width: 425px) {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
&-collapse {
justify-content: flex-end;
#media screen and (max-width: 768px) {
background: #402808 0% 0% no-repeat padding-box;
.nav-item:last-child {
display: none;
}
}
}
&-nav {
align-items: center;
}
.nav-item {
margin-right: 4rem;
transition: all 0.2s;
&:hover {
.nav-link {
color: #f1cd9d !important;
}
}
#media screen and (max-width: 1366px) {
margin-right: 3rem;
}
#media screen and (max-width: 1200px) { margin-right: 1rem; }
#media screen and (max-width: 1024px) {
margin-right: 1rem;
}
}
}
.hero {
background: url("/assets/src/images/hero.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
margin-bottom: 10rem;
.herowoman {
left: 79.4rem;
position: absolute;
top: 35.3rem;
}
.row1 {
margin-top: 18rem;
justify-content: center;
img {
width: 251px;
height: 192px;
}
#media screen and (max-width: 425px) {
img {
width: 155px;
height: 118px;
}
}
}
.row2 {
position: relative;
h1 {
&::after {
content: "";
display: block;
width: 0;
height: 2px;
background: #efefef;
width: 5.5%;
#media screen and (max-width: 425px) {
width: 10.5%;
}
}
}
p {
font-size: clamp(10rem, 24vw, 44rem);
text-align: center;
line-height: clamp(16rem, 22vw, 35rem);
font-weight: bold;
letter-spacing: 6.16px;
color: #ffffff;
opacity: 0.26;
}
.herowoman {
width: 371px;
height: 543px;
position: absolute;
top: -2.5rem;
left: 49.5rem;
}
button {
z-index: 99;
position: fixed;
right: 0rem;
top: 56rem;
width: 214px;
}
#media screen and (max-width: 425px) {
h1 {
font-size: 1.8rem;
line-height: 6.5rem;
}
p {
font-size: 11.3rem;
line-height: 11.5rem;
}
}
}
.row3 {
justify-content: center;
position: relative;
img {
width: 371px;
height: 543px;
position: absolute;
top: -12rem;
left: 49.5rem;
}
p {
font: normal normal bold 440px/457px Poppins;
letter-spacing: 6.16px;
color: #ffffff;
opacity: 0.26;
}
}
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="/html/index.php"><img src="/assets/src/images/logo.png" alt=""
class="img-fluid"></a>
<button class="navbar-toggler x" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-auto">
<li class="nav-item">
<a class="nav-link navmenu-text" aria-current="page" href="/html/index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/about.php">About</a>
</li>
<li class="nav-item ">
<a class="nav-link navmenu-text" href="/html/services.php">services</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/rooms.php">rooms</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/gallery.php">gallery</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/contact.php">Contact</a>
</li>
</ul>
<li class="nav-item-last">
<a href="#" class=" d-flex">
<img src="../assets/src/images/location.svg" alt="" class="img-responsive">
<p class="nav-text">BHAIRAHAWA, RUPANDEHI</p>
</a>
<a href="#" class=" d-flex">
<img src="../assets/src/images/phone.svg" alt="" class="img-responsive">
<p class="nav-text">(718)432-6687</p>
</a>
</li>
</div>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="row row1">
<img src="/assets/src/images/logo.svg" alt="" class="img-responsive">
</div>
<div class="row row2">
<h1>A Superior Budget</h1>
<p class="">HOTEL</p>
<button class="btn btn-primary btn-text" onclick="window.location.href='/html/booknow.php'">BOOK
NOW</button>
</div>
</div>
<img src="/assets/src/images/herowoman.png" alt="" class="img-responsive herowoman">
</section>

You'll have to add alpha value to the background color.
Example:
.navbar {
background: rgba(0, 0, 0, 0.8);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
backdrop-filter: blur(13px);
}
But backdrop filter is not supported in IE and Firefox.
To get around you can use #support and add a fallback property
.navbar {
background: rgba(0, 0, 0, 0.8);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
backdrop-filter: blur(13px);
#supports (
(-webkit-backdrop-filter: blur(13px)) or (backdrop-filter: blur(13px))
) {
background: rgba(0, 0, 0, 0.0);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
}

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 style fullscreen menu under default bootstrap toggler?

I am building my first page using Bootstrap Studio and I am wondering how I could achieve a menu design like this, or similar: https://codemyui.com/fullscreen-overlay-navigation-menu/
When I click on menu toggle, it looks like this: https://imgur.com/6czS25f
My website link: https://kreatika.bss.design/
Thanks for any advice
<nav class="navbar navbar-light navbar-expand-lg sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="/assets/img/Logo.png?h=9093bdbc164804385c272277c0ab9d7f"></a>
<button data-toggle="collapse" class="navbar-toggler custom-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon" style="width: 30px;height: 30px;"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item" role="presentation"><a class="nav-link active" href="#">Úvod</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Služby</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Ukázky práce</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Náš příběh</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Akademie</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kariéra</a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item d-lg-flex d-xl-flex align-items-lg-center align-items-xl-center social-icons" role="presentation"><img class="social-icon-image" src="/assets/img/Facebook.png?h=261a62c570931f4fc3acbc1b33ae74d3"><img class="social-icon-image" src="/assets/img/Insta.png?h=be50f2dccc1bf2ad3d65a5104a48300d"></li>
</ul>
</div>
</div>
</nav>
[1]: https://i.stack.imgur.com/c5Dnp.jpg

https://i.imgur.com/Nunc77r.png
If its just a fixed fading menu with centered .navbar-nav, then the below answer might help. Though there are a lot of examples in your first link so hard to tell what you want exactly.
I've still not found away to disable the Bootstrap 4 navbar .collapsing toggle class. I can't find anything in the documentation to turn it off, which means you always have a height transition when opening/closing the mobile navbar.
But you can override the .collapsing class with CSS, though seems a little hacky for such a simple thing.
After a bit of fiddling I found I could override the collapsing class animation using .collapsing[style*="height"].
Bootstrap 4 natively adds the attribute style="height:...px;" to the .navbar-collapse div via javascript when the .navbar-toggler button is first clicked. But not on the second closing click.
See my codeply example link below using Bootstrap 4... (using SASS).
https://www.codeply.com/go/GXRF6aA5Du
.navbar {
.navbar-toggler {
z-index: 1000;
}
.navbar-collapse {
#include media-breakpoint-down(md) {
background: rgba(#000,.85);
opacity: 0;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
&.collapse {
opacity: 0;
pointer-events: none;
display: flex;
}
&.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important;
}
&.collapsing {
opacity: 0;
height: 100vh;
}
&.collapse.show {
opacity: 1;
pointer-events: auto;
}
.navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto;
}
}
}
}
#include media-breakpoint-down(md) {
.navbar-nav {
margin-left: initial !important;
}
}
This is the CSS output below if your not using SASS.
If you drop the below CSS into the DOM on your site it looks like this...
https://i.imgur.com/Nunc77r.png
.navbar .navbar-toggler{
z-index:1000
}
#media (max-width: 991.98px){
.navbar .navbar-collapse{
background:rgba(0,0,0,0.85);
opacity:0;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
transition:opacity 0.35s ease;
display:flex;
flex-direction:column;
align-content:center;
text-align:center !important
}
.navbar .navbar-collapse.collapse{
display:flex;
opacity:0;
pointer-events:none
}
.navbar .navbar-collapse.collapsing[style*="height"]{
opacity:1;
height:100vh !important
}
.navbar .navbar-collapse.collapsing{
opacity:0;
height:100vh
}
.navbar .navbar-collapse.collapse.show{
opacity:1;
pointer-events:auto
}
.navbar .navbar-collapse .navbar-nav{
margin-right:initial !important;
margin-top:auto;
margin-bottom:auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
And a stackoverflow demo too using the CSS (not the sass)...
MAIN {
padding-top: 30px;
padding-bottom: 30px;
margin-top: 56px;
height: 3000px
}
.navbar .navbar-toggler {
z-index: 1000
}
#media (max-width: 991.98px) {
.navbar .navbar-collapse {
background: rgba(0, 0, 0, 0.85);
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity 0.35s ease;
display: flex;
flex-direction: column;
align-content: center;
text-align: center !important;
overflow-y: scroll;
overflow-x: hidden
}
.navbar .navbar-collapse.collapse {
display: flex;
opacity: 0;
pointer-events: none
}
.navbar .navbar-collapse.collapsing[style*="height"] {
opacity: 1;
height: 100vh !important
}
.navbar .navbar-collapse.collapsing {
opacity: 0;
height: 100vh
}
.navbar .navbar-collapse.collapse.show {
opacity: 1;
pointer-events: auto
}
.navbar .navbar-collapse .navbar-nav {
margin-right: initial !important;
margin-top: auto;
margin-bottom: auto
}
}
#media (max-width: 991.98px) {
.navbar-nav {
margin-left: initial !important;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="jumbotron">
<h1>Navbar example</h1>
<p class="lead">This example is a quick exercise to illustrate how fixed to top navbar works. As you scroll, it will remain fixed to the top of your browser’s viewport.</p>
<a class="btn btn-lg btn-primary" href="/docs/4.2/components/navbar/" role="button">View navbar docs »</a>
</div>
</main>

li menu title hides when hovering over child ul sub menu

I am in the process of building this dashboard the problem is when i hover over the li in the sidebar then the sub menu shows but when I take the cursor away from the menu title to the submenu ul then the heading disappears.
Test the code after expanding the window size to full. I have marked the code which is responsible for showing menu on hover with the title "Code Responsible for showing menu on hover"
Also i cant get rid of that black mark over the title
https://i.imgur.com/TVnKPMG.png
var toggler = document.querySelector('.toggler');
var minWidth768 = window.matchMedia("(min-width: 768px)");
var maxWidth767 = window.matchMedia("(max-width: 767px)");
var bdy = document.querySelector('.bdy');
toggler.addEventListener("click", function() {
if(minWidth768.matches) {
bdy.classList.toggle('sidebar-collapse');
} else if(maxWidth767.matches) {
bdy.classList.toggle('sidebar-expand');
}
});
var treeview = document.querySelectorAll(".treeview > .treeview-menu");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
treeview[i].parentNode.addEventListener("click", function(ev) {
ev.preventDefault();
this.classList.toggle("menu-open");
for (var x=0; x<treeview.length; x++){
submenu[x].addEventListener("click", function(e) {
e.stopPropagation();
})
}
});
}
/*HEADER*/
* {
transition: all 300ms linear;
}
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
}
.main-header .logo {
display: block;
float: left;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
width: 230px;
padding: 0 15px;
font-weight: 300;
background: #7f224f;
overflow: hidden;
color: #fff;
}
.main-header .navbar {
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
background: #9b265f;
}
.toggler {
margin-top:10px;
font-size: 20px;
color: white;
cursor: pointer;
margin-left: 10px;
}
.logo-mini {
display: none;
}
/*SIDEBAR*/
#main-sidebar{
position: absolute;
top: 0;
left: 0;
padding-top: 70px;
min-height: 100%;
width: 230px;
z-index: 810;
background: #222d32;
}
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
}
.user-p-image img {
width: 100%;
max-width: 50px;
height: auto;
}
.user-panel .info {
padding: 5px 5px 5px 15px;
line-height: 1;
position: absolute;
left: 55px;
color: #fff;
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0;
}
.sidebar-menu li.header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226;
}
.sidebar a {
color: #b8c7ce;
text-decoration: none;
}
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
background: #111618;
margin: 6px 0;
}
/*SIDEBAR TOGGLE CODE*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .main-header .logo {
width: 50px !important;
}
.bdy.sidebar-collapse .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-collapse .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-collapse .main-header .navbar {
margin-left: 50px;
}
.bdy.sidebar-collapse #main-sidebar {
width: 50px !important;
}
.bdy.sidebar-collapse #content-wrapper {
margin-left: 50px;
}
}
#media (max-width: 767px) {
.main-header .logo {
width: 0px;
}
.main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.main-header .logo > .logo-lg {
display: none;
}
.main-header .navbar {
margin-left: 0px;
}
#main-sidebar {
width: 0px !important;
padding-left: 0px !important;
overflow: hidden;
}
#content-wrapper {
margin-left: 0px !important;
}
.bdy.sidebar-expand .main-header .logo {
width: 230px;
}
.bdy.sidebar-expand .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-expand .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-expand .main-header .navbar {
margin-left: 230px;
}
.bdy.sidebar-expand #main-sidebar {
width: 230px !important;
}
.bdy.sidebar-expand #content-wrapper {
margin-left: 230px;
}
}
/*END OF TOGGLE CODE*/
/*LIST TOGGLE*/
.treeview-menu {
display: none;
}
.treeview.menu-open .treeview-menu{
display: block;
}
/*END OF LIST TOGGLE*/
/*Code Responsible for showing menu on hover*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .sidebar-menu > li > a > span,
.bdy.sidebar-collapse .sidebar-menu > li > .treeview-menu {
display: none !important;
}
.bdy.sidebar-collapse .sidebar-menu > li > a:hover span {
display: block !important;
position: absolute;
top: 0;
width: 180px;
background: #111618;
padding: 12px 0;
left: 49px;
z-index: 99999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover .treeview-menu {
display: block !important;
background: grey;
position: absolute;
width: 180px;
left: 49px;
z-index: 999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
position: relative !important;
float: right;
width: auto !important;
left: 180px !important;
top: -22px !important;
z-index: 900;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
top: 44px;
margin-left: 0;
}
}
/*CONTENT*/
#content-wrapper {
padding: 15px;
margin-left: 230px;
min-height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bdy">
<div class="wrapper">
<header class="main-header">
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>K</b>Ame</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Ame</b>Xub</span>
</a>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="toggler"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dinesh Thapa <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</header>
<div id="main-sidebar">
<div class="sidebar">
<div class="user-panel">
<div class="pull-left user-p-image">
<img src="user.jpg" class="img-circle">
</div>
<div class="pull-left info">
<p>Dinesh Thapa</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class='nme'>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>dsdssdd</span>
</a>
</li>
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="row">
<h1>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
</div>
<footer style="position: absolute; bottom: 0;">
copyright
</footer>
</div>
</div> <!-- wrapper -->
</div> <!--bdy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
https://jsfiddle.net/nd9ky5x2/

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;
}