How can I control my logo size in Bootstrap? - html

Question

.new-application-menu {
background-color: #47484c;
height: 100%;
padding: 0px;
z-index: 10;
box-shadow: -1px 0px 2px #000000;
}
.new-application-menu ul {
color: #fff;
/* border: 1px solid white; */
}
.new-application-menu ul li {
padding: 8px;
border-bottom: 0.01px solid rgba(255, 255, 255, 0.2);
background-color: #27A9E3;
}
.new-application-menu ul li p {
font-size: 12px;
padding: 5px;
}
.new-application-menu ul li i {
font-size: 12px;
color: rgba(255, 255, 255, 0.8);
}
<div class="col-md-1 new-application-menu">
<ul class="nav navbar-nav text-center">
<li><img src="assets/Img/logo2.png" width="55" height="95"></li>
<li> <i class="material-icons" style="font-size:36px">description</i>
<p>بانک جامع اطلاعاتی</p>
</li>
<li> <i class="material-icons" style="font-size:36px">assessment</i>
<p>نبض شهر</p>
</li>
<li> <i class="material-icons" style="font-size:36px">colorize</i>
<p>آزمایشگاه شهری</p>
</li>
<li> <i class="material-icons" style="font-size:36px">remove_red_eye</i>
<p>رصد طرح های توسعه ی شهری</p>
</li>
<li> <i class="material-icons" style="font-size:36px">location_city</i>
<p>رصد پروژه های شهری</p>
</li>
</ul>
</div>
When I'm using this code and my list feature's height exceeds my page size, it automatically adds a scrollbar to my page and it causes to my grid system to overlay each other. How can I prevent this overlay?

Answer 1

You can use your custom class like .myLogo as i added
.new-application-menu {
background-color: #47484c;
height: 100%;
padding: 0px;
z-index: 10;
box-shadow: -1px 0px 2px #000000;
}
.new-application-menu ul
{
color: #fff;
/* border: 1px solid white; */
}
.new-application-menu ul li
{
padding: 8px;
border-bottom: 0.01px solid rgba(255,255,255,0.2);
background-color: #27A9E3;
}
.new-application-menu ul li p
{
font-size: 12px;
padding: 5px;
}
.new-application-menu ul li i
{
font-size: 12px;
color: rgba(255,255,255,0.8);
}
.myLogo{ width:100px; height:100px;}
<div class="col-md-1 new-application-menu">
<ul class="nav navbar-nav text-center">
<li><img src="assets/Img/logo2.png" width="55" height="95" class="myLogo"></li>
<li> <i class="material-icons" style="font-size:36px">description</i><p>بانک جامع اطلاعاتی</p></li>
<li> <i class="material-icons" style="font-size:36px">assessment</i> <p>نبض شهر</p></li>
<li> <i class="material-icons" style="font-size:36px">colorize</i><p>آزمایشگاه شهری</p> </li>
<li> <i class="material-icons" style="font-size:36px">remove_red_eye</i><p>رصد طرح های توسعه ی شهری</p> </li>
<li> <i class="material-icons" style="font-size:36px">location_city</i><p>رصد پروژه های شهری</p> </li>
</ul>
</div>