Modifying the navbar.html in _includes breaks my clean blog site

[utsavo-afk]

this is my _config.yml

title: WebDevZTH
email: [email protected]
description: my real-time web developer journey
author: Utsav Ojha
baseurl: "/"
url: "https://webzth.github.io"

# Social Profiles
twitter_username: WebZth
github_username: WebZth
facebook_username:
instagram_username:
linkedin_username:

# Add your google-analytics ID here to activate google analytics
google_analytics: UA-XXXXXXXXX-X # out your google-analytics code

# Build settings
markdown: kramdown
paginate: 5
paginate_path: "/posts/page:num/"
plugins:
  - jekyll-feed
  - jekyll-paginate
  - jekyll-sitemap ## Uncomment this line to silently generate a sitemaps.org compliant sitemap for your Jekyll site

This is my navbar.html in _includes folder

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
  <div class="container">
    <a class="navbar-brand" href="{{" /" | relative_url }}">
      <img src="/img/webzth-logo-dark.png" alt="" class="logo-dark" />
      <img src="/img/webzth-logo-light.png" alt="" class="logo-light" />
    </a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
      data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
      aria-label="Toggle navigation">
      Menu
      <i class="fa fa-bars"></i>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="{{" /" | relative_url }}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{" /about" | relative_url }}">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{ " /posts" | relative_url }}">Posts</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{" /contact" | relative_url }}">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I've modified the navbar-brand with custom images, but this breaks the whole site, where am I going wrong?

[abdirahmn1]

add

.logo-dark {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 250px;
}
.logo-light {
    height: auto;
    width: auto;
    max-height: 72px;
    max-width: 250px;
}

at the end of your _navbar.scss file located at /assets/vendor/startbootstrap-clean-blog/scss/components/
take care 🙂