I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly according to the screen size and appearing too large. Can you point out what I might be doing incorrectly?
My website is built on Bootstrap 4, and I am specifically working on making a mobile version. Unfortunately, the display doesn't look good at the moment.
<div class="footer navbar row">
<div class="col-sm-2 menu_item">
<a href="#home" class="active">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#news">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
<div class="col-sm-2 menu_item">
<a href="#contact">
<img src="<source>" class="menu_img" alt="Logo"/>
</a>
</div>
/* Position the navbar at the bottom of the page and make it sticky */
.navbar {
background-color: var(--primary-color-1);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
margin: 0px;
height: 10vh;
}
/* Style for the menu items */
.menu_item {
position: relative;
padding: 2px 10px;
margin: 0px;
}
/* Styling for the links inside the navbar */
.navbar a {
float: left;
display: block;
text-align: center;
text-decoration: none;
}
/* Custom styling for the images/icons of the links */
.menu_img {
height:100%;
width: 100%;
object-fit: cover;
}