Floating for menu items is not working - javascript

I'm an amateur and I'm practicing. But when I code this I can't get the margin right for menu items.
This is my project:
body {
background: #f5f5f5;
}
.top-f{
font-size: .9rem;
}
.h1brand{
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1{
margin: 10px 0;
}
.nav-icon{
margin: 0 0;
}
.logo span{
color: #50d8af;
}
.logo:hover{
text-decoration: none;
}
.nav-menu ul li a{
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu{
min-width: 15rem;
}
.dropdown-menu a:hover{
background: #9fcdff;
}
.background-img{
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor{
color: #0c2e8a;
}
.headcolor2{
color: #50d8af;
}
.btn{
border-radius: 0px;
}
.mc{
text-align: center;
align-content: center;
}
.navbar-toggler{
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3">
<i class="fa fa-phone text-secondary"></i>
<span class="ml-2 text-secondary">09905645285</span>
</li>
<li class="list-inline-item mr-3">
<i class="fas fa-envelope text-secondary"></i>
<span class="ml-2 text-secondary">parsaking#example.com</span>
</li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary">
<i class="fab fa-twitter"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-facebook-f"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-instagram"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-google-plus-g"></i>
</li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary">
<i class="fab fa-linkedin-in"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="row">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo col-xl-6 col-lg-6 float-left">
<h1 class="h1brand ">Reve
<span>al</span>
</h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse col-xl-6 col-lg-6 " id="collapsibleNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!--start section offer-->
<div class="container-fluid">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making
<span class="headcolor2">your ideas </span>
<br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Can you help me to make xl and lg float right and responsive, please?
I tried everything to solve this problem but I failed every time.
And it's reveral theme, made with bootstrap.
It wants more text from me and I'm not very good in English. Oh, how can I tell?
I don't know much about CSS and HTML and this is a disaster.
Thanks a lot.


I have made some changes in your structure to make it aligned. As of now your navbar is aligned. Please confirm if it solves your problem.
body {
background: #f5f5f5;
}
.top-f {
font-size: .9rem;
}
.h1brand {
color: #0c2e8a;
font-size: 2.8rem;
}
.logo h1 {
margin: 10px 0;
}
.nav-icon {
margin: 0 0;
}
.logo span {
color: #50d8af;
}
.logo:hover {
text-decoration: none;
}
.nav-menu ul li a {
color: #555;
font-weight: 600;
font-size: 1.05rem;
}
.dropdown-menu {
min-width: 15rem;
}
.dropdown-menu a:hover {
background: #9fcdff;
}
.background-img {
background-size: cover;
width: 100%;
min-height: 65vh;
max-height: auto;
background-repeat: no-repeat;
opacity: .4;
position: absolute;
}
.headcolor {
color: #0c2e8a;
}
.headcolor2 {
color: #50d8af;
}
.btn {
border-radius: 0px;
}
.mc {
text-align: center;
align-content: center;
}
.navbar-toggler {
border: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<body>
<div class="container-fluid">
<div class="row border-bottom top-f">
<div class="container">
<div class="row">
<!--email and phonenumber-->
<div class="col-lg-5 col-md-8 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mt-3 mb-3 text">
<li class="list-inline-item mr-3 border-right pr-3"><i class="fa fa-phone text-secondary"></i><span class="ml-2 text-secondary">09905645285</span></li>
<li class="list-inline-item mr-3"><i class="fas fa-envelope text-secondary"></i><span class="ml-2 text-secondary">parsaking#example.com</span></li>
</ul>
</div>
<!--social media-->
<div class="col-lg-7 col-md-4 d-lg-inline d-md-inline d-sm-none d-none">
<ul class="list-inline mb-3 mt-3 text-secondary float-lg-right">
<li class="list-inline-item pl-2 pr-2 text-secondary"><i class="fab fa-twitter"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-facebook-f"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-instagram"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-google-plus-g"></i></li>
<li class="list-inline-item pl-2 pr-2 border-left text-secondary"><i class="fab fa-linkedin-in"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<nav class="navbar navbar-expand-md navbar-light ">
<!-- Brand -->
<a href="#" class="display-4 font-weight-bold logo">
<h1 class="h1brand ">Reve<span>al</span></h1>
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-expanded="true">
<span class="navbar-toggler-icon nav-icon"></span>
</button>
<!-- Navbar links -->
<div class="navbar-collapse collapse show" id="collapsibleNavbar" style="">
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"> HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> TUTORIAL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> DROPDOWN</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<!--start section offer-->
<div class="container">
<div class="row">
<img src="img/3.jpg" class="background-img">
<div class="col-12 mc mt-5">
<h2 class="display-3 font-weight-bold headcolor">making <span class="headcolor2">your ideas </span><br>happen</h2>
</div>
<div class="col-12 mc mt-5">
<button class=" btn btn-lg btn-primary">Get GetSarted</button>
<button class="btn btn-lg btn-secondary ml-4">Our Projects</button>
</div>
</div>
</div>
<!--scripts-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Related

Navbar links hrefs doesn't work Bootstrap

I've got a problem with my Bootstrap 5.0.2 navbar both desktop and mobile when collapsed.
The point is to collapse after click on links.
Hrefs/links dont't work.
Can u guys tell me where I messed up?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="shortcut icon" href="img/favicon.ico" />
<link rel="icon" type="image/png" href="img/favico.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style> .navbar {
background-color: black;
}
#home {
height: 30vh;
background-color: yellow;
}
#about {
height: 30vh;
background-color: red;
}
#my-skills {
height: 30vh;
background-color: green;
}
#work {
height: 30vh;
background-color: purple;
}
#work {
height: 30vh;
background-color: blue;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<!-- nav -->
<nav id="wrap" class="navbar navbar-expand-lg navbar-dark menu fixed-top gradient-nav">
<div class="container">
<div class="row align-items-start">
<div class="col-2">
<a class="navbar-brand " href="#home">
<img src="img/logo.png" alt="logo">
</a>
</div>
</div>
<div class="row align-items-center">
<div class="collapse navbar-collapse col-8" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="#home" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#about" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">About</a></li>
<li class="nav-item"><a class="nav-link" href="#my-skills" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">My Skills</a></li>
<li class="nav-item"><a class="nav-link" href="#work" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Work</a></li>
<li class="nav-item"><a class="nav-link" href="#contact" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show">Contact</a></li>
</ul>
</div>
</div>
<div class="row align-items-end">
<div class="collapse navbar-collapse col-2" id="navbarSupportedContent">
<ul class="navbar-nav text-center">
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-facebook"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-git-alt"></i></a>
</li>
<li class="socials-top"><a href="#" data-bs-toggle="collapse"
data-bs-target=".navbar-collapse.show"><i class="fab fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<section id="home"></section>
<section id="about"></section>
<section id="my-skills"></section>
<section id="work"></section>
<section id="contact"></section>
<script src="https://kit.fontawesome.com/ccbb5f75d7.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">
</script>
</body>
</html>

Keep List in the sidebar on same line after collapse

I recently used an open-source code for creating Sidebar to implement to my Website.
I'm trying to do 2 things mainly to it. The first thing I wanted to be "collapsed onLoad", I tried doing it myself but the content of it stayed out of the sidebar. The second problem I'm facing is "Keeping the icons on the same line of the content", I want the icons when the sidebar is collapsed to be on the same line of the list when it's open.
$(document).ready(function() {
// Hide submenus
$('#body-row .collapse').collapse('hide');
// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');
// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$('.menu-collapsed').toggleClass('d-none');
$('.sidebar-submenu').toggleClass('d-none');
$('.submenu-icon').toggleClass('d-none');
$('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
// Treating d-flex/d-none on separators with title
var SeparatorTitle = $('.sidebar-separator-title');
if (SeparatorTitle.hasClass('d-flex')) {
SeparatorTitle.removeClass('d-flex');
} else {
SeparatorTitle.addClass('d-flex');
}
// Collapse/Expand icon
$('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group -->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted d-flex align-items-center menu-collapsed" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 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>

I have made the necessary changes.
$(document).ready(function() {
// Hide submenus
$("#body-row .collapse").collapse("hide");
// Collapse/Expand icon
$("#collapse-icon").addClass("fa-angle-double-left");
// Collapse click
$("[data-toggle=sidebar-colapse]").click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$(".menu-collapsed").toggleClass("d-none");
$(".sidebar-submenu").toggleClass("d-none");
$(".submenu-icon").toggleClass("d-none");
$("#sidebar-container").toggleClass("sidebar-expanded sidebar-collapsed");
$("#push-medown").toggleClass("open");
// Collapse/Expand icon
$("#collapse-icon").toggleClass("fa-angle-double-left fa-angle-double-right");
}
});
#body-row {
margin-left: 0;
margin-right: 0;
}
#sidebar-container {
min-height: 100vh;
background-color: #333;
padding: 0;
}
/* Sidebar sizes when expanded and expanded */
.sidebar-expanded {
width: 230px;
}
.sidebar-collapsed {
width: 60px;
}
/* Menu item*/
#sidebar-container .list-group a {
height: 50px;
color: white;
}
/* Submenu item*/
#sidebar-container .list-group .sidebar-submenu a {
height: 45px;
padding-left: 30px;
}
.sidebar-submenu {
font-size: 0.9rem;
}
/* Separators */
.sidebar-separator-title {
background-color: #333;
height: 35px;
}
.sidebar-separator {
background-color: #333;
height: 25px;
}
.logo-separator {
background-color: #333;
height: 60px;
}
/* Closed submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="false"] .submenu-icon::after {
content: " \f0d7";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
/* Opened submenu icon */
#sidebar-container .list-group .list-group-item[aria-expanded="true"] .submenu-icon::after {
content: " \f0da";
font-family: FontAwesome;
display: inline;
text-align: right;
padding-left: 10px;
}
#push-medown {
margin-top: 90px;
opacity: 0;
}
#push-medown.open {
opacity: 1;
}
<script src="https://kit.fontawesome.com/ddcb362732.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-collapsed d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group-->
<ul class="list-group">
<a href="#" data-toggle="sidebar-colapse" class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class=" w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fas fa-bars mr-3 "></span>
</div>
</a>
<!-- Separator with title -->
<li class="list-group-item sidebar-separator-title text-muted align-items-center d-flex" id="push-medown">
<large>STUDENT</large>
</li>
<!-- /END Separator -->
<!-- Menu with submenu -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fab fa-microsoft fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Dashboard</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-list-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Homework</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-chalkboard-teacher fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Classes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Grades</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-hourglass-start fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Quizes</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Agenda</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="far fa-calendar-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-volume-up fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Events</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fas fa-sign-out-alt fa-fw mr-3"></span>
<span class="menu-collapsed d-none">Logout</span>
</div>
</a>
</ul>
<!-- List Group END-->
</div>
<!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">My Bar</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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>
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Profile</a>
<a class="dropdown-item" href="#">Tasks</a>
<a class="dropdown-item" href="#">Etc ...</a>
</div>
</li>
<!-- Smaller devices menu END -->
</ul>
</div>
</nav>
<!-- NavBar END -->
</div>
<!-- Main Col END -->
</div>
<!-- body-row END -->
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" 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>
👉 Check it in action on codepen

Full screen slider with materialize css, next and previous buttons with materialize js methods

I have been using Materialize CSS for the first time and I'm experiencing an error while I'm working with fullscreen slider.
I'm trying to add next and previous buttons which is not working. And also the next to the slider is div is getting hidden behind the sliders. I cannot add padding because there is the height of the slider is responsive.
Following is the code I'm working on
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="screen">
.middle-indicator {
position: absolute;
top: 50%;
z-index: 1000;
}
.middle-indicator-text {
font-size: 4.2rem;
}
a.middle-indicator-text {
color: white !important;
}
.content-indicator {
width: 64px;
height: 64px;
background: none;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.indicators {
visibility: hidden;
}
</style>
</head>
<body>
<div class="navbar-fixed white-text">
<ul id='about' class='dropdown-content orange accent-2'>
<li>About Us</li>
<li class="divider" tabindex="-1"></li>
<li>Why RNR?</li>
</ul>
<ul id='projects-main' class='dropdown-content orange accent-2'>
<li>First Project</li>
<li class="divider" tabindex="-1"></li>
<li>Pheonix project of projects and project </li>
</ul>
<nav class="orange">
<div class="nav-wrapper container">
Logo
<i class="material-icons white-text">menu</i>
<ul class=" orange right hide-on-med-and-down">
<li class="active"><a class="white-text" href="sass.html"> <span>Home </span></a></li>
<li><a class="dropdown-trigger white-text" href='#' data-target='about'>About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
<li><a class="dropdown-trigger white-text" href='#' data-target='projects-main'>Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a></li>
<li><a class="white-text" href="collapsible.html">Javascript</a></li>
<li><a class="white-text" href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav orange" id="mobile-nav">
<li><a class="white-text" href="sass.html">Home</a></li>
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header white-text" style="padding: 0px 32px !important">About<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="amber accent-4 collapsible-body">
<ul>
<li><a class="white-text" href="#!">About Us</a></li>
<li><a class="white-text" href="#!">Why RNR?</a></li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Projects<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="amber accent-4 collapsible-body">
<ul>
<li><a class="white-text" href="#!">First</a></li>
<li><a class="white-text" href="#!">Second</a></li>
</ul>
</div>
</li>
<li>
<a class="collapsible-header white-text text-accent-4" style="padding: 0px 32px !important">Gallery<i class="material-icons right white-text text-darken-2">arrow_drop_down</i></a>
<div class="collapsible-body">
<ul class="amber accent-4">
<li><a class="white-text" href="#!">First</a></li>
<li><a class="white-text" href="#!">Second</a></li>
<li><a class="white-text" href="#!">Third</a></li>
<li><a class="white-text" href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a class="white-text" href="collapsible.html">Events</a></li>
<li><a class="white-text" href="mobile.html">Contact</a></li>
<div class="row">
<div class=" container footer white col s12 center-align valign-wrapper" style="height: 100px; position: absolute; bottom: 60px;">
Follow us:
</div>
</div>
</ul>
<div class="slider fullscreen" data-indicators="true" >
<div class="slider-fixed-item center middle-indicator">
<div class="left">
<a href="" onclick="prev();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
class="material-icons left middle-indicator-text">chevron_left</i></a>
</div>
<div class="right">
<a href="" onclick="next();" class="middle-indicator-text waves-effect waves-light content-indicator button"><i
class="material-icons right middle-indicator-text">chevron_right</i></a>
</div>
</div>
<ul class="slides">
<li class="slider-item">
<img src="https://images.unsplash.com/photo-1464817739973-0128fe77aaa1?dpr=1&auto=compress,format&fit=crop&w=1199&h=799&q=80&cs=tinysrgb&crop="> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="slider-item">
<img src="https://ununsplash.imgix.net/photo-1414849424631-8b18529a81ca?q=75&fm=jpg&s=0e993004a2f3704e8f2ad5469315ccb7"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li class="slider-item">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col m6 s12">
<div class="row">
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">
</div>
</div>
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 200px"alt="">
</div>
</div>
</div>
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="https://ununsplash.imgix.net/uploads/1413259835094dcdeb9d3/6e609595?q=75&fm=jpg&s=6a4fc66161293fc4a43a6ca6f073d1c5" style="height: 410px"alt="">
</div>
</div>
</div>
</div>
</div>
<div class="col m6 s12">
</div>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.sidenav');
var instances = M.Sidenav.init(elems, {
edge: 'right',
draggable: true,
inDuration: 250,
outDuration: 200,
onOpenStart: null,
onOpenEnd: null,
onCloseStart: null,
onCloseEnd: null,
preventScrolling: true
});
var collapsibleElem = document.querySelector('.collapsible');
var collapsibleInstance = M.Collapsible.init(collapsibleElem, {});
var dropdownElems = document.querySelectorAll('.dropdown-trigger');
var instances = M.Dropdown.init(dropdownElems, {
alignment:'right',
constrainWidth:false,
coverTrigger:false});
var sliderElems = document.querySelectorAll('.slider');
var instances = M.Slider.init(sliderElems, {indicators: false, interval:'5'});
window.next = function() {
var sliderElem = document.querySelector('.slider');
var l = M.Slider.getInstance(sliderElem);
l.next(1);
}
window.prev = function() {
var sliderElem = document.querySelector('.slider');
var l = M.Slider.getInstance(sliderElem);
l.prev(1);
}
});
</script>
</body>
</html>
TIA
Best Regards,
Manoj.

OK I figured it out, I should add # in a href, if not the page will keep reloading with every click.

HTML element scroll down until a specific value

Code:
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
height: 10vh;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
<title>Tets</title>
</head>
<body>
<!-- Nav Boostrap -->
<section class="position-absolute">
<ul class="nav nav-fill fixed-top nav-null-color" id="menu">
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Corporate</a>
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Used Machinery</a>
</li>
<li class="nav-item">
<img src="" id="logo" alt="logo">
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Services</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link text-white" href="#">Customer Area</a>
</li> -->
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Sign In/Register</a>
</li>
</ul>
</section>
<!-- About Us -->
<section id="about" class="corporate text-center">
<div class="screen-center">
<h1 class="text-dark">About us</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<h3>gsfgdfgdfgdg</h3>
<p>fsdfgsdgdsfgsdfgsdfg</p>
</div>
</div>
</div>
</section>
<div class="row">
<div class="col-2 scroll-spy" id="">
<div class="d-flex flex-column ml-5 mt-5 spy-menu">
<h4>Corporate</h4>
<a class="nav-link text-dark underline" href="#top"> About Us</a>
<a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
<a class="nav-link text-dark underline" href="#careers">Careers Title</a>
<a class="nav-link text-dark underline" href="#contact">Contact Us</a>
</div>
<input type="text" id="prueba" value="">
<input type="text" id="prueba2" value="">
</div>
<div class="col-10">
<!-- Worlwide -->
<section id="worldwide" class="worldwide text-center">
<h1 class="mt-5 mb-5">Worldwide</h1>
<div class="container">
<div class="row justify-content-between">
<div class="col ml-5">
<ul class="list-group">
<li class="list-group-item active">dfgdfgdfgdfg</li>
<li class="list-group-item">dfgdfgdfg</li>
<li class="list-group-item">dfdfdgd</li>
<li class="list-group-item">dfgdf</li>
<li class="list-group-item">e-mail: jdfgdfgdfg</li>
<li class="list-group-item">Tel :dfgdfgdg‹</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">dfgdfgd</li>
<li class="list-group-item">Cdfgdfg</li>
<li class="list-group-item">2dfgdfgn</li>
<li class="list-group-item">dfgdfga</li>
<li class="list-group-item">SdfgdfgN</li>
<li class="list-group-item">e-mail: dfgdfgdfg</li>
<li class="list-group-item">dfgdgdfg</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">OdfgdfgK</li>
<li class="list-group-item">fgdfgdg
<li class="list-group-item">email: gffhfgfgh</li>
<li class="list-group-item">Tel: +fhghfg9</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Ogfghfhhu </li>
<li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
<li class="list-group-item">rdgrgg</li>
<li class="list-group-item">email: rdgdrgds</li>
<li class="list-group-item">Tel.: drgdgrgdrg</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Careers Title -->
<section id="careers" class="careers">
<div class="screen-center">
<h1 class="text-dark">Careers Title</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<p>drgdrgdrgdrgdrgdg</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact">
<div class="screen-center">
<h1 class="text-dark">Contact Us</h1>
<div class="container">
<div class="row justify-content-center blank">
<div class="col-4">
<form>
<div class="form-group">
<input type="text" class="form-control mt-3" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company">
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>Albania</option>
<option>Angola</option>
<option>Argelia</option>
<option>Argentina</option>
<option>Armenia</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile">
</div>
</form>
</div>
<div class="col-4">
<form>
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
</div>
<button type="button" class="btn btn-outline-warning btn-lg">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="container mt-3 mb-3">
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Company</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">About Us</a>
<a class="nav-link text-dark underline" href="#">Offices</a>
<a class="nav-link text-dark underline" href="#">News Media</a>
<a class="nav-link text-dark underline" href="#">Contact</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-cogs" aria-hidden="true"></i></span>
<h4 class="ml-3">drgdrgdy</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdgy</a>
<a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
<a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Contact</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>Worldwide Contact</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">Legal</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">Legal Information</a>
<a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">gggggg</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">rgdgdrg</a>
<a class="nav-link text-dark underline" href="#">fthgdrgd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Language</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>English</option>
<option>Spanish</option>
<option>German</option>
<option>Italian</option>
<option>Russian</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Account</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
<a class="nav-link text-dark underline" href="#">drgdg</a>
<a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
<a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
</li>
</ul>
</div>
<div class="col">
<img src="img/youtube.png" id="youtube" alt="youtube">
</div>
</div>
</div>
</section>
<!-- jQuery first, then Popper.js, then 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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
$('#prueba').val(window.scrollY);
if ($('.scroll-spy').offset().top > 2500) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
</script>
</body>
</html>
What i'm trying to do is to fix the problem of the lateral menu that when you scroll down it superimpose the footer. I try to fix this with JQuery by changing the position property to relative when it overpass an especific value of the scroll, and that works correctly. I also wanted to give it back the sticky property when the scroll value is less than the limit one, but it dosen't work correctly. Do you know what I am missing? Thank you for your help.

You see, you are checking $('.scroll-spy').offset().top, and make $('.scroll-spy').css('top', '1800px'); after 2500px offset. So after that the offset of $('.scroll-spy') will always be 1800. Better to check the offset of something else, like window.scrollY.
<script>
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
$('#prueba').val(window.scrollY);
if (window.scrollY > 2500) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
</script>
UPDATED
But the best solution will be the one with no concert digits. Rewrites a script a bit. And in template added align-items-start in .scroll-spy parent
<div class="row align-items-start">
<div class="col-2 scroll-spy" id="">
and in CSS removed height from .scroll-spy. Please look the Snippet below.
$(window).scroll(function() {
if ($("#menu").offset().top > 56) {
$("#menu").addClass("nav-color");
} else {
$("#menu").removeClass("nav-color");
}
let scrollSpyHeight = $('.scroll-spy').outerHeight();
let footerOffsetTop = $('.footer').offset().top;
let windowTop = jQuery(window).scrollTop();
$('#prueba').val(window.scrollY);
if ($('.scroll-spy').offset().top > (footerOffsetTop-scrollSpyHeight)) {
$('#prueba2').val(1);
$('.scroll-spy').css('position', 'relative');
$('.scroll-spy').css('top', '1800px');
} else {
$('#prueba2').val(2);
$('.scroll-spy').css('position', 'sticky');
$('.scroll-spy').css('top', '2rem');
}
});
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery first, then Popper.js, then 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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/normalize.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style/style.css">
<title>Tets</title>
</head>
<body>
<!-- Nav Boostrap -->
<section class="position-absolute">
<ul class="nav nav-fill fixed-top nav-null-color" id="menu">
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Corporate</a>
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Used Machinery</a>
</li>
<li class="nav-item">
<img src="" id="logo" alt="logo">
</li>
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Services</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link text-white" href="#">Customer Area</a>
</li> -->
<li class="nav-item">
<a class="nav-link text-white underline" href="#">Sign In/Register</a>
</li>
</ul>
</section>
<!-- About Us -->
<section id="about" class="corporate text-center">
<div class="screen-center">
<h1 class="text-dark">About us</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<h3>gsfgdfgdfgdg</h3>
<p>fsdfgsdgdsfgsdfgsdfg</p>
</div>
</div>
</div>
</section>
<div class="row align-items-start">
<div class="col-2 scroll-spy" id="">
<div class="d-flex flex-column ml-5 mt-5 spy-menu">
<h4>Corporate</h4>
<a class="nav-link text-dark underline" href="#top"> About Us</a>
<a class="nav-link text-dark underline" href="#worldwide">Worldwide</a>
<a class="nav-link text-dark underline" href="#careers">Careers Title</a>
<a class="nav-link text-dark underline" href="#contact">Contact Us</a>
</div>
<input type="text" id="prueba" value="">
<input type="text" id="prueba2" value="">
</div>
<div class="col-10">
<!-- Worlwide -->
<section id="worldwide" class="worldwide text-center">
<h1 class="mt-5 mb-5">Worldwide</h1>
<div class="container">
<div class="row justify-content-between">
<div class="col ml-5">
<ul class="list-group">
<li class="list-group-item active">dfgdfgdfgdfg</li>
<li class="list-group-item">dfgdfgdfg</li>
<li class="list-group-item">dfdfdgd</li>
<li class="list-group-item">dfgdf</li>
<li class="list-group-item">e-mail: jdfgdfgdfg</li>
<li class="list-group-item">Tel :dfgdfgdg‹</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">dfgdfgd</li>
<li class="list-group-item">Cdfgdfg</li>
<li class="list-group-item">2dfgdfgn</li>
<li class="list-group-item">dfgdfga</li>
<li class="list-group-item">SdfgdfgN</li>
<li class="list-group-item">e-mail: dfgdfgdfg</li>
<li class="list-group-item">dfgdgdfg</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">OdfgdfgK</li>
<li class="list-group-item">fgdfgdg
<li class="list-group-item">email: gffhfgfgh</li>
<li class="list-group-item">Tel: +fhghfg9</li>
</ul>
</div>
<div class="col">
<ul class="list-group">
<li class="list-group-item active">Ogfghfhhu </li>
<li class="list-group-item">udrgdrgdg vhghdgfdrdr</li>
<li class="list-group-item">rdgrgg</li>
<li class="list-group-item">email: rdgdrgds</li>
<li class="list-group-item">Tel.: drgdgrgdrg</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Careers Title -->
<section id="careers" class="careers">
<div class="screen-center">
<h1 class="text-dark">Careers Title</h1>
<div class="row justify-content-center">
<div class="col-6 blank">
<p>drgdrgdrgdrgdrgdg</p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section id="contact" class="contact">
<div class="screen-center">
<h1 class="text-dark">Contact Us</h1>
<div class="container">
<div class="row justify-content-center blank">
<div class="col-4">
<form>
<div class="form-group">
<input type="text" class="form-control mt-3" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Lastname">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Company">
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option>Albania</option>
<option>Angola</option>
<option>Argelia</option>
<option>Argentina</option>
<option>Armenia</option>
</select>
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Telephone">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Mobile">
</div>
</form>
</div>
<div class="col-4">
<form>
<div class="form-group">
<textarea class="form-control mt-3" id="exampleFormControlTextarea1" rows="8"></textarea>
</div>
<button type="button" class="btn btn-outline-warning btn-lg">Send</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<section class="footer">
<div class="container mt-3 mb-3">
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Company</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">About Us</a>
<a class="nav-link text-dark underline" href="#">Offices</a>
<a class="nav-link text-dark underline" href="#">News Media</a>
<a class="nav-link text-dark underline" href="#">Contact</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-cogs" aria-hidden="true"></i></span>
<h4 class="ml-3">drgdrgdy</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdgy</a>
<a class="nav-link text-dark underline" href="#">Ordgdgrdrgr</a>
<a class="nav-link text-dark underline" href="#">rdgdrgdg</a>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Contact</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>Worldwide Contact</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">Legal</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">Legal Information</a>
<a class="nav-link text-dark underline" href="#">COOKIES Policy</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<div class="d-flex">
<span><i class="fa fa-gavel" aria-hidden="true"></i></span>
<h4 class="ml-3">gggggg</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">rgdgdrg</a>
<a class="nav-link text-dark underline" href="#">fthgdrgd</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-phone" aria-hidden="true"></i></span>
<h4 class="ml-3">Language</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<select class="form-control form-control-sm">
<option>English</option>
<option>Spanish</option>
<option>German</option>
<option>Italian</option>
<option>Russian</option>
</select>
</li>
</ul>
</div>
<div class="col">
<div class="d-flex">
<span><i class="fa fa-building" id="icon" aria-hidden="true"></i></span>
<h4 class="ml-3">Account</h4>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link text-dark underline" href="#">drgdgdrgd</a>
<a class="nav-link text-dark underline" href="#">drgdg</a>
<a class="nav-link text-dark underline" href="#">drgdrgdgdg</a>
<a class="nav-link text-dark underline" href="#">drgdgdrgdrgs</a>
</li>
</ul>
</div>
<div class="col">
<img src="img/youtube.png" id="youtube" alt="youtube">
</div>
</div>
</div>
</section>
</body>
</html>

css properties not working properly in class.col function

I want to apply certain css properties in particular area i.e."Dashboard" and I have assigned a class name "main" for div.col function under html for the same but when I try to apply css property in it, it gets applied to whole page.
here's the code for html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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">
<link rel="stylesheet" href="css/adminboard.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js">
<link href="https://fonts.googleapis.com/css?family=Rosario&display=swap" rel="stylesheet">
</head>
<body>
<title>Admin Dashboard</title>
<!--navbar starts here -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<a class="navbar-brand" href="#">Admin Dashboard</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" href="#"><i class="fas fa-tachometer-alt"></i> Dashboard<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-cogs"></i> Settings</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-question-circle"></i> Help</a></li>
</ul>
<ul class="navbar-nav ml-auto">
<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>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-user-plus"></i> Add Users</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="far fa-copy"></i> Add Categories</a></li>
</ul>
</div>
</nav>
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<div class="col-sm-9 col-md-10 main">
<h1 class="page-header">Dashboard</h1></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
CSS code:
[![body{
font-family: 'Rosario' ;
}
.sidebar{
margin:10px -8px 20px 20px;
}
.sidebar>li>a{
padding: 20px 20px;
}
.main{
margin-top: 80px;
background-color: lightgray;
}]
I want my page to look exactly like this.: https://i.stack.imgur.com/odqIK.png
Right now it is looking like this: https://i.stack.imgur.com/PgL6l.png

I'm not exactly sure how you'll want to proceed with this project.
For what you asked, I'd go about:
no need to wrap your h1:
<h1 class="page-header">Dashboard</h1></div>
around a div.
Then, you can add your classes to your h1 and add a max-height to its css and adjust positioning with padding.
HTML:
<!--navbar ends </here>-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 ">
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Stats</a> </li>
<li class="nav-item"><a class="nav-link" href="#">Graphs</a></li>
<li class="nav-item"><a class="nav-link" href="#">Users</a></li>
</ul>
<ul class="nav flex-column sidebar">
<li class="nav-item"><a class="nav-link active" href="#">Reports</a></li>
<li class="nav-item"><a class="nav-link" href="#">Revenues</a></li>
<li class="nav-item"><a class="nav-link" href="#">Countries</a></li>
<li class="nav-item"><a class="nav-link" href="#">Spammers</a></li>
</ul>
</div>
<h1 class="page-header col-sm-9 col-md-10 main">Dashboard</h1>
</div>
</div>
CSS:
<style>
body {
font-family: 'Rosario';
}
.sidebar {
margin: 10px -8px 20px 20px;
}
.sidebar>li>a {
padding: 20px 20px;
}
.main {
padding-top: 30px;
max-height: 100px;
background-color: lightgray;
}

Categories

Resources