While working on the collapsible navbar, I encountered an issue with the logo image not being responsive. To address this, I implemented a media query to resize it. However, upon shrinking the screen, I noticed that the toggle button shifted down and the icon inside the toggle button became invisible.
.navbar{
background-color: #fff;
padding: 0px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.54), 0 2px 10px 0 rgb(175, 175, 175);
}
.navbar-toggler{
background-color: #2196f3;
margin-right: 10px;
}
.dropdown-item:hover {
color: #fff;
text-decoration: none;
background-color: #2196f3!important;
}
/* media queries */
@media (max-width:490px){
.navbar-brand > img{
width: 80%;
}
.navbar-brand{
margin-right: 0px;
/*text-align: center;*/
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://i.imgur.com/E1r683u.png" class="img-fluid"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>