I'm facing an issue with my navigation bar. It appears perfectly on desktop and even looks fine when I simulate it on smartphones and tablets using developer tools. But when I actually open the webpage on a mobile device, the navbar icon becomes extremely small and the height of the navbar changes. Any suggestions on how to resolve this?
Here is how it appears in Chrome's developer tools, where everything appears fine
And this is how it actually looks on smartphones and tablets
Below is the HTML code for the navbar
<!-- Only on smartphones -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Navigation Menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#about" class="nav-link">About me</a>
</li>
<li class="nav-item">
<a href="#academic" class="nav-link">Academic</a>
</li>
<li class="nav-item">
<a href="#experience" class="nav-link">Experience</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">Skills</a>
</li>
<li class="nav-item">
<a href="#social" class="nav-link">Social</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact me</a>
</li>
</ul>
</div>
Below is the CSS code
navbar-brand img {
margin: auto;
border-radius: 5px;
border: solid 2px rgb(108, 186, 135);
height: 40px;
width: 40px;
}