As a challenge, I am attempting to eliminate the .navbar-brand>img element once the screen size exceeds 768px by using media queries. Unfortunately, my efforts have not been successful so far. Although the styling applied to the img is successfully removed, the image itself remains in its original position.
I want to point out that I am utilizing BS4 for this task.
<body>
<div class="container-fluid">
<nav class="navbar-expand-lg navbar navbar-light">
<!-- Image and text -->
<a class="navbar-brand" href="#"><img alt="" class="d-inline-block align-top" height="30" src="img/SpartanHead.png" width="30"></a> <button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span></button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="about.html">ABOUT</a>
</li>
</ul>
</div>
</nav>
</div>
</body>
CSS
.navbar {
background-color: #2A2F35;
padding: 0 !important;
}
/*Navbar Links*/
.navbar-nav a {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-size: 14px;
font-weight: 100;
letter-spacing: 1px;
color: #ffffff !important;
padding: 25px;
margin: 0px 25px 0px 25px;
}
@media only screen and (max-width: 768px) {
.navbar-brand>img {
width: auto;
max-height: 90px;
margin: 10px 0px 10px 30px;
}
}
@media screen and (min-width: 768px) {
.navbar-brand>img {
display: none;
}
}