My custom sidebar didn't fill the entire column in bootstrap - html

My sidebar didnt fill entire column from bootstrap. i didnt define the width for the sidebar
here is my css for sidebar
.sidebar {
position: fixed;
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */ /* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
my html looks like this
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
<li class="nav-item mb-2">
<a class="nav-link active" href="#">
<img src="img/sidebar/home.svg" class="mr-3 icon-sidebar" alt="">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/check-circle.svg" class="mr-3 icon-sidebar" alt="">
Goal
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/clipboard.svg" class="mr-3 icon-sidebar" alt="">
To Do
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/calendar.svg" class="mr-3 icon-sidebar" alt="">
Kalender
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
currently im using bootstrap 4.6 version.
and here is my full code in github:
for css
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/assets/css/sidebar.css
for the sidebar
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/partials/sidebar.ejs
for the full html
https://github.com/gergerchan/testingfrontend/blob/feature/goal-dan-register/views/goal.ejs
update :
i remove position:fixed and change it to height :100%
but when i scroll now my side bar content will scroll too.
i am using nodejs, express js, and for the view engine i use ejs.
thank you before


Can you please check the below code? Hope it will work for you. We have remove position: fixed form sidebar and add row element in parents of col-*
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.sidebar {
/* position: fixed; */
/* top: 0;
bottom: 0;
left: 0;
width:100%;
z-index: 100; */
/* Behind the navbar */
background-color: #3A3735;
}
.sidebar-sticky {
position: relative;
top: 0;
height: 100vh;
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto;
/* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #ffffff;
margin-bottom: 15px;
}
.sidebar .nav-link.active {
color: #3A3735;
background-color: #fff;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 30px;
}
.sidebar .nav-link:hover .icon-sidebar,
.sidebar .nav-link.active .icon-sidebar {
color: green;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="row">
<div class="col-2">
<nav id="sidebarMenu" class="sidebar">
<div class="sidebar-sticky pt-3">
<p class="d-flex justify-content-center align-items-center">
<a href="#">
<img src="img/logo-white.svg" alt="home">
</a>
</p>
<ul class="nav nav-pills flex-column mx-4">
<li class="nav-item mb-2">
<a class="nav-link active" href="#">
<img src="img/sidebar/home.svg" class="mr-3 icon-sidebar" alt=""> Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/check-circle.svg" class="mr-3 icon-sidebar" alt=""> Goal
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/clipboard.svg" class="mr-3 icon-sidebar" alt=""> To Do
</a>
</li>
<li class="nav-item mb-2">
<a class="nav-link" href="#">
<img src="img/sidebar/calendar.svg" class="mr-3 icon-sidebar" alt=""> Kalender
</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-10">
</div>
</div>
</body>
</html>

Related

How do I make a sidenav scrollbar?

I have a sidenav using a <ul> tag. How to make sidenav show scrollbar auto?
An Example of what my sidenav looks like
html:
<section class="sticky-top">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<li class="nav-item">
<a class="nav-link" href="#">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Test 2 </a>
</li>
<li class="nav-item">
<a class="nav-link " href="#">Test 3</a>
</li>
</ul>
</section>
css:
.nav {
position: absolute;
z-index : 3;
}
.navbar {
z-index : 3;
background-color: var(--white);
}

When I applied the sidebar styling by enclosing the <ul> element in a <div> element, I got the desired result. Hovering the sidebar (when the hover event occurs) opens the scrollbar.
<div class="sidebar">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<!-- sidebar items -->
</ul>
</div>
.sidebar{
position: fixed;
top: 0;
bottom: 0;
background: #6C757D;
width: 140px;
}
.sidebar:hover{
overflow-y: auto
}
The executable snippet is available below. The overflow-y: auto; style comment line defined in the .sidebar:hover block has been made to automatically display the scrollbar; Added overflow-y: auto; style to .sidebar block.
.sidebar {
position: fixed;
top: 0;
bottom: 0;
background: #6C757D;
width: 140px;
overflow-y: auto;
}
.sidebar:hover {
/* overflow-y: auto */
}
.nav {
position: absolute;
z-index: 3;
}
.navbar {
z-index: 3;
background-color: var(--white);
}
.nav-link {
color: #ffffff;
font-size: 12px;
&:hover {
transition: color 0.4s ease-in;
background: rgba(255, 255, 255, 0.04);
color: #ffffff;
}
&.active {
background-color: #007bff;
}
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<section class="sticky-top">
<div class="sidebar">
<ul class="nav flex-column bg-secondary p-3 rounded-right col-md-3 col-lg-2 text-center min-vh-100">
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
<li class="nav-item"><a class="nav-link" href="#">Test</a></li>
</ul>
</div>
</section>
</body>

can't make the main tag expand over all the space in the monitor

I'm working in the base.html of a dashboard for my webapp, and trying to make a div expand over all the monitor's space left after the sidebar navigation that tacks 3 columns left. also the button that it meant to be a toggler when the size of the screen is small don't contain the sidebarMenu.
the code for the this page:
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<!-- CSS Files -->
<link rel="stylesheet" href="{% static 'Drivers_App_Management/css/base.css' %}" type="text/css" media="screen">
<!-- Bootstrap CSS -->
<link href="/docs/5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style media="screen" type="text/css">
/* Chart.js */
#keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
</style>
{% block title %}
{% endblock title %}
</head>
<body>
<header class="navbar navbar-dark sticky-top flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="{% url 'Drivers_App_Management:index' %}">
<span class="d-flex">
<img src="{% static 'Drivers_App_Management/media/ST.png' %}" class="img-fluid rounded-circle" width="47" height="60" alt="...">
</span>
</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">
Bonjour:
{{ user.first_name }}
{{user.registration_number}}
</span>
</div>
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#"> Link to somewhere </a>
</li>
</ul>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-dark sidebar-dark collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#"> Dashboard </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Orders </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Products </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Customers </a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Title</span>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#"> Month</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Last Quarter </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Year-end sale </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Sociale </a>
</li>
</ul>
</div>
</nav>
<main id="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="chartjs-size-monitor">
<div class="chartjs-size-monitor-expand">
<div class=""></div>
</div>
<div class="chartjs-size-monitor-shrink">
<div class=""></div>
</div>
</div>
<div class="d-flex justify-content-evenly flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2"> Tableau de bord</h1>
</div>
{% block content %}{% endblock content %}
</main>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="/docs/5.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons#4.28.0/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4/dist/Chart.min.js" integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha" crossorigin="anonymous"></script>
</body>
</html>
the base.css is:
body {
font-size: .875rem;
}
header {
background-color: #e21718;
}
.feather {
width: 16px;
height: 16px;
vertical-align: text-bottom;
}
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
/* rtl:raw:
right: 0;
*/
bottom: 0;
/* rtl:remove */
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link .feather {
margin-right: 4px;
color: #727272;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
color: inherit;
}
.sidebar-heading {
font-size: .75rem;
text-transform: uppercase;
}
/*
* Navbar
*/
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
background-color: rgba(0, 0, 0, .25);
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}
.navbar .navbar-toggler {
top: .25rem;
right: 1rem;
}
.navbar .form-control {
padding: .75rem 1rem;
border-width: 0;
border-radius: 0;
}
.form-control-dark {
color: #fff;
background-color: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
}
.form-control-dark:focus {
border-color: transparent;
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}
the wepage looks like :

You made the mistake of specifying a class listing id for the main tag. Here:
<main id="col-md-9 ms-sm-auto col-lg-10 px-md-4">
Since these are classes, use the class attribute. Like this:
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
The id attribute cannot contain a list of identifiers from the point of view of correct layout. This is attribute name must contain only one value.

Bootstrap navbar items not getting in center

there is a website that I came across and I was making a clone of it using html css and bootstrap. But I am facing problems like my navbar is not working out. I need help I need to center the items in the navbar in the center and the social icons on the right side. I am new to this thing can anyone please help me?
here's the website that I am trying to make a clone of
and here is my code
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img{
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght#300&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<div class="cintainer-fluid">
<div class="row">
<div class="span6" style=" float: none; margin: 0 auto;">
<ul class=" navbar-nav ">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<ul class="list2">
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
</ul>
<ul class="list3">
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt=""
loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class=""
style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
</body>
</html>

Please view the snippet in full page mode.
I have only tried to help in what you have asked, there are still some issues which I have not tried to solve as you are trying to learn.
Below are the changes:
1 Added justify-content-md-center in below tag
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
2 Adjusted above tag's children to have two ul only
3 added ml-auto css class in above two ul tags
/* #navbarNav {
padding-bottom: 36px;
padding-top: 54px;
} */
.nav-img {
width: auto;
max-width: 100%;
max-height: 69px;
}
.navbar-custom {
background-color: #000000;
}
.title-div {
position: absolute;
z-index: 1;
top: 461px;
}
.home-heading {
background-color: rgba(255, 255, 255, 0.5);
color: black;
}
.main-image {
/* background-image: url(../img/ill.jpg); */
width: 100%;
height: 82%;
position: relative;
z-index: -1;
}
.navbar {
padding: 100px;
background-color: black;
}
.navbar-brand {
margin: 0px 0px 0px 30px;
}
.navbar-toggler {
filter: invert(100%);
}
.navbar-nav li {
float: left;
}
.nav-item a {
display: block;
text-align: center;
}
.instagram {
filter: invert(100%);
padding: 6px;
}
.facebook {
filter: invert(100%);
padding: 6px;
}
.email {
filter: invert(100%);
padding: 6px;
}
.phone-call {
filter: invert(100%);
}
/* .mid{
margin: 0px 0px 0px 200px;
padding: 0px 0px 0px 235px;
} */
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
background-color: #000;
}
li {
float: left;
/* border-right: 1px solid #bbb; */
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.logo {
/* width: 133px;
height: 69px; */
width: auto;
max-width: 100%;
max-height: 69px;
margin-top: 9px;
margin-bottom: 17px;
margin-left: 16px;
}
.bdy-img {
width: 45% !important;
height: auto !important;
padding-top: 96px;
padding-left: 75px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital#1&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- <nav class="navbar navbar-expand-lg navbar-custom " >
<img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt="">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav justify-content-center" >
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav> -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<img src="img/logo-nav.jpg" class="logo" alt="Logo Img" loading="lazy" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo01">
<ul class=" navbar-nav ml-auto">
<li>
<a class="nav-link" href="">Shop</a>
</li>
<li>
<a class="nav-link" href=""> I Love Lables</a>
</li>
<li>
<a class="nav-link" href=""> About</a>
</li>
<li>
<a class="nav-link" href=""> How It Works</a>
</li>
<li>
<a class="nav-link" href=""> Charities</a>
</li>
<li>
<a class="nav-link" href=""> Sell With Us</a>
</li>
<li>
<a class="nav-link" href=""> News</a>
</li>
<li>
<a class="nav-link" href=""> Designers</a>
</li>
<li>
<a class="nav-link" href=""> Contact</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">
<img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt="" loading="lazy" />
</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="main-bdy-div align-items-center" >
<div class="container-fluid title-div home-heading">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" >I love labels</h1>
</div>
<div class="container-fluid title-div " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">New Zealand's
Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
<img class="main-image" src="img/ill.jpg" alt="">
</div> -->
<div class="main-img">
<img class="main-image" src="img/ill.jpg" alt="">
</div>
<div class="container-fluid justify-content-start">
<div class="container-fluid title-div " style=" text-align: center; width: 28%; background-color: rgba(255, 255, 255, 0.5); ">
<h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;">I love labels
</h1>
</div>
<div class="container-fluid title-div justify-content-between " style="width: 49%; background-color: rgba(255, 255, 255, 0.5); top: 576px; ">
<h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;">
New Zealand's Premier Boutique for Quality Preloved Designer Fashion</h1>
</div>
</div>
<!-- main body section -->
<div class="container-fluid">
<div>
<img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
height: auto;" alt="">
<div class="d-flex align-items-start justify-content-end">
<h1 style="text-align: center;">Our Unique Approach.</h1>
</div>
</div>
</div>
<!-- bootstrap js -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

You could use 'justify-content-center' class to align list items to center:
<ul class="nav justify-content-center">
and 'nav justify-content-end' to align items to right:
<ul class="nav justify-content-end">
https://getbootstrap.com/docs/4.4/components/navs/

How to set the body background image at 50%?

How can I make the body image only visible in half?
I also tried with background-size, I don't succeed or I don't realize being a beginner.
Looking for a few good hours to answer the question, I do not realize how I can make the image to be seen only half of the screen.
body {
background: url(bg.jpg) no-repeat center center fixed;
margin-top: -10px;
min-height: 100vh;
overflow-x: hidden;
}
.vertical-nav {
min-width: 17rem;
width: 17rem;
height: 100vh;
position: fixed;
top: 0;
left: 0;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s;
}
.page-content {
width: calc(100% - 17rem);
margin-left: 17rem;
transition: all 0.4s;
}
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="vertical-nav bg-white" id="sidebar">
<p class="text-gray font-weight-bold text-uppercase px-3 small pb-4 mb-0">BAZA DE DATE</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">
<i class="fas fa-home mr-3 text-primary fa-fw"></i>
Acasa
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
</ul>
</div>
<div class="page-content p-5" id="content">
<h2 class="display-4 text-white">Bootstrap vertical nav</h2>
</div>
</body>
</html>

div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

Here is the sample code where I was able to achieve it.
.main{
overflow: hidden;
}
.div1{
width:30%;
height:400px;
display:inline-block;
float:left;
}
.div2{
width:70%;
height:400px;
display:inline-block;
float:left;
position: relative;
text-align: center;
color: white;
}
.cusImg{
width:100%;
height:100%
}
.topLeft{
position: absolute;
top: 8px;
left: 16px;
}
<!DOCTYPE html>
<html>
<head>
<title>Startup</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<!-- Bootstrap CSS from a CDN. This way you don't have to include the bootstrap file yourself -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Your own stylesheet -->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="main">
<div class="vertical-nav bg-white div1" id="sidebar">
<p class="text-gray font-weight-bold text-uppercase px-3 small pb-4 mb-0">BAZA DE DATE</p>
<ul class="nav flex-column mb-0">
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">
<i class="fas fa-home mr-3 text-primary fa-fw"></i>
Acasa
</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark font-italic bg-light" href="#">Active</a>
</li>
</ul>
</div>
<div class="div2">
<img class="cusImg" src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
<div class="topLeft">
Hello There!
</div>
</div>
</div>
</body>
</html
Let me know if this helps you.

sticky-top and logo display

I've been struggling with one problem related to displaying a logo when a sticky header is activated. The menu I've accomplished so far works as intended, but I need to display the logo in a small version as soon the header becomes sticky and keep the options centered. Below what I've got:
And I need something like this as soon as the div becomes sticky:
Here's my code so far:
.navbar {
background-color: #fff !important;
}
.navbar .navbar-nav li a {
color: #b29b72 !important;
}
.navbar .navbar-brand {
color: #b29b72 !important;
}
.navbar .navbar-brand:hover {
color: #b29b72 !important;
}
.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(178,155,114, 0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
/* HOMEPAGE *****************************************************/
.video-container {
padding-right: 0px;
padding-left: 0px;
}
#splash {
position: relative;
text-align: center;
height: 300px;
background-color: #878787;
}
#splash .video {
position: relative;
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
border-bottom: 1px solid #eee;
}
#splash .opaque {
opacity: 0.4;
background-color: #ffffff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.menu-options {
padding-top: 12px;
}
.menu-options a {
color: #b29b72;
font-weight: 600;
font-size: 20px;
}
#menu-row {
height: 50px;
background-color: #000000 !important;
}
.menu-options ul {
margin: 0;
padding: 0;
}
.menu-options ul li {
display: inline-block;
width: 120px;
}
<!DOCTYPE html>
<html>
<head>
<title>My Fantastic Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark main-nav">
<div class="container">
<div class="navbar-collapse collapse nav-content order-2">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
<ul class="nav navbar-nav text-nowrap flex-row mx-md-auto order-1 order-md-2">
<li class="nav-item">
<a class="nav-link" href="#"><img src="http://via.placeholder.com/200x110"></a>
</li>
<button class="navbar-toggler custom-toggler ml-2" type="button" data-toggle="collapse" data-target=".nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</ul>
<div class="ml-auto navbar-collapse collapse nav-content order-3 order-md-3">
<ul class="ml-auto nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 4</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="menu-row" class="sticky-top">
<div class="container">
<div class="row">
<div class="col-12 menu-options text-center">
<ul>
<li>OPTION 1</li>
<li>OPTION 2</li>
<li>OPTION 3</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid video-container">
<div id="splash">
<div class="video">
<video autoplay="autoplay" poster="http://via.placeholder.com/1920x300" loop="loop" muted="muted" preload="auto">
<source src="" type="video/mp4">
<source src="" type="video/webm">
</video>
<div class="opaque"></div>
</div>
</div>
<div class="container">
<div class="row" style="height: 100vh;">
<div class="col-12">
</div>
</div>
</div>
</div>
</body>
</html>

You'll need two logos (large - standard. Small - scroll / navigation). Then do the following add the following JQuery to your code, but make sure you use the specific class names (not the ones I've used in my example).
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>