Bootstrap Navbar Image logo resizing with media queries

I'm trying to get a logo on the left of my Navbar to resize responsively, I've tried several different methods that I have found on here but I've had no luck. Any help appreciated.

I have @media queries at the moment but they are not working. My code; https://codepen.io/grabthereef/pen/WKVMEd

HTML

    <!--Nav -->
<nav class="navbar navbar-expand-md navbar-light fixed-top py-1">
  <div class="container">
    <a href="index.php" class="navbar-brand">
      <img class="img-fluid" src="img/ycal.png" alt="">
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a href="?page=why-choose-us" class="nav-link">Why Choose Us</a>
        </li>
        <li class="nav-item">
        <a href="?page=our-services" class="nav-link">Our Services</a>
        </li>
        <li class="nav-item">
        <a href="?page=remote-help" class="nav-link">Remote Help</a>
        </li>
        <li class="nav-item">
        <a href="?page=contact-us" class="nav-link">Contact Us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS

.navbar {
  box-shadow: 2px 2px 5px #3292a6;
  opacity: 0.9;
  background: #fff; }
.navbar .nav-item {
  font-size: 1.2rem;
  padding-right: 20px; }

 @media(max-width: 950px) {
  .ycal img {
    width: 264px;
    height: 68px;
  }
}

@media(max-width: 600px) {
  .ycal img {
    width: 264px;
    height: 68px;
  }
}

Solution

You're on the right track with @media queries. The only reason they are not working in your example is that you are not correctly selecting the images you want to resize.

.ycal img selects an image tag inside an element with the class of .ycal, but that in your case is already the image you want.

So update the selector and it will work just fine:

@media(max-width: 950px) {
    .ycal {
        width: 264px;
        height: 68px;
    }
}

You can also check out the updated codepen.