Replacing the header text with an image (Workshop theme)

If I wanted to replace the header text with my logo, what would I change about this header section?

<header class="site-navbar py-3" role="banner">
      <div class="container-fluid">
        <div class="row align-items-center">
          <div class="col-11 col-xl-2">
            <h1 class="mb-0"><a href="index.html" class="text-white h2 mb-0">Work<span class="text-primary">shop</span> </a></h1>
          <div class="col-12 col-md-10 d-none d-xl-block">
            <nav class="site-navigation position-relative text-right" role="navigation">
              <ul class="site-menu js-clone-nav mx-auto d-none d-lg-block">
                <li class="active"><a href="index.html">Home</a></li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="speakers.html">Speakers</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contacts</a></li>
                <li class="cta"><a href="buy-tickets.html">Buy Tickets</a></li>
          <div class="d-inline-block d-xl-none ml-md-0 mr-auto py-3" style="position: relative; top: 3px;"><a href="#" class="site-menu-toggle js-menu-toggle text-white"><span class="icon-menu h3"></span></a></div>

I’m pretty sure the only line that matters is this one:
<h1 class=“mb-0”><a href=“index.html” class=“text-white h2 mb-0”>Work<span class=“text-primary”>shop</span> </a></h1>

I figured it out. That part was easy.

<h1><a href="index.html"><img src="images/logo.png" alt="Image" class="img-fluid"></a></h1>

But now I have a new challenge. How do I stop this from happening?

The only thing I can think to stop it would be to disable highlighting all together, or to get rid of the gradients and make the gradients a solid color.

So, how do I do both of those things? I’d like to test them and see which solution I like more.

hey there

Please provide a link to the page