I'm having an issue with the overflow-y: scroll property under the "Online Contacts" section in my code. It's not working as expected, but when I change the position to absolute and make certain adjustments, it starts working. I'm using Bootstrap 4 for this project and can't seem to figure out what's causing this bug.
Here is the code for reference: https://jsfiddle.net/hdesh7/rL43unfj/1/
Below is the HTML code snippet:
<html lang="en">
<!---Importing Bootstrap and CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="dashboardstyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id = "top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id = "openMenu">
<div class="row">
<div class = "col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class = "txt txt-1">Dashboard</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class = "txt txt-2">Profile</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class = "txt txt-3">Certificates</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class = "txt txt-4">Send/Apply</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class = "txt txt-5">Settings</h5>
</div>
<div class = "col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class = "txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class = "rest container">
<h2 class = "text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class = "row contact">
...
CSS:
html{
overflow-y: scroll;
}
#top{
top: 0;
position: sticky;
z-index: 1;
}
.topbar{
height: 90px;
background-color: #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
/*
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
*/
}
@keyframes greeting{
0%{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60%{
opacity: 1;
}
}
...