Browser shakes on open dropdown or clicking list item - html

Question

When i click on the dropdown menu or hover over the dropdown list's elements.. the browser window shakes. The shaking effect disappears when i remove the .row and .column classes from the markup.. I am using bootstrap for most of the purpose (including dropdown menu and grid) in this project
here's the markup.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700&display=swap');
#nav-left {
background-color: #44403b;
height: 92vh;
overflow: hidden;
#navigation {
padding: 10px;
width: 100%;
color: #acb2d4;
font-size: 18px;
letter-spacing: 0.5px;
background-color: #322e2b;
}
ul.menu {
padding: 0;
margin : 0;
list-style: none;
li {
&:hover {
background-color: #49423f;
}
a {
text-decoration: none;
display: block;
padding: 15px;
cursor: pointer;
font-size: 18px;
color: #acb2d4;
border-bottom: 1px solid #515151;
&.parent::after {
content: "\f107";
font: normal normal normal 14px/2 FontAwesome;
float: right;
margin-right: 8px;
}
//collapsed class is overriding the content of parent class, but when we click the collapsed class changes to
// collapse and then the content of parent is shown
&.collapsed::after {
content: "\f105";
}
}
}
}
& li ul#sub-menu1 {
margin:0;
padding: 0;
list-style: none;
& li {
line-height: 10px;
&:hover {
background-color: #48423f;
}
a {
transition: all 0.5s;
}
}
}
& li ul li a:hover {
transform:translateX(10px);
background-color: #322e2b;
width: 100%;
overflow: hidden;
}
}
<div class="row">
<div class="col-2">
<nav id="nav-left">
<div id="navigation"><i class="fa fa-bars"></i> Navigation</div>
<ul class="menu">
<li class="active">
<i class="fa fa-dashboard fw"></i> Dashboard
</li>
<li>
<a data-toggle="collapse"
href="#sub-menu1"
role="button"
aria-expanded="false"
aria-controls="sub-menu1"
class="parent collapsed">
<i class="fa fa-user fw"></i>
Users
</a>
<ul class="collapse" id="sub-menu1">
<li>
<i class="fa fa-users text-primary"></i> All Users
</li>
<li>
<i class="fa fa-plus text-secondary"></i> New Users
</li>
<li>
<i class="fa fa-dot-circle-o text-success"></i> Active Users
</li>
<li>
<i class="fa fa-dot-circle-o text-danger"></i> Inactive Users
</li>
<li>
<i class="fa fa-ban"></i> Blocked Users
</li>
</ul>
</li>
<li>
<i class="fa fa-calendar"></i> Events
</li>
</ul>
</nav>
</div>
<div class="col-10">
<div class="row">
<div class="col-4">
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
</div>
</div>

Answer 1

Could it be so simple that it is the browsers vertical scrollbar that appears? Is the drop down very high?
If so you can make the vertical browser scrollbar visible all the time by adding a css Rule
body {
overflow: scroll;
}
Adds both the vertical and horizontal scrollbar all the time
Use overflow-y only for vertical