Header logo is smaller after upgrading to 2.2.0.beta5

Product Support
6

You can use the following to allow the logo to increase in size up-to the dimensions specified in your theme.

.d-header #site-logo {
  height: auto;
}

I can’t really tell what’s broken because I don’t know what the desired result is.

If you’re noticing a particular problem, please specify what it is.

the logo size on mobile is actually set in your theme. You have these rules in your theme

@media screen and (max-width: 500px) {
  #main #site-logo {
    max-height: 60px;
  }
}

@media screen and (max-width: 800px) {
  #main #site-logo {
    max-width: 100%;
  }
}

I noticed that the caret icon is broken but that’s because we changed the way we handle FontAwesome icons.

You have this rule

@media screen and (max-width: 800px) {
  .nav-open:before {
    content:"\f0d7";
    padding: 0 10px;
    font: normal normal normal 14px/1 FontAwesome;
    display: inline-block;
  }
}

This doesn’t work anymore.

Since this is custom markup, you can inline the caret icon. You html currently looks like this

<div class="kc-menu-container">
<nav class="kc-menu">
  <input type="checkbox" id="nav" class="hidden">
  <label for="nav" class="nav-open">Menu</label>
  <div class="nav-container">
    <ul>
      <li><a href="https://otf.ca/knowledge">Knowledge Centre</a></li>
      <li><a href="https://share.otf.ca/latest">Discussion</a></li>
      <li><a href="https://otf.ca/knowledge/community-hubs">Community Hubs</a></li>
      <li><a href="https://otf.ca/knowledge/resources">Resources</a></li>
    </ul>
  </div>
</nav>
</div>

To add the icon back, you need to add this inside the label

<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="fa-caret-down d-icon custom-caret" height="15" width="15" viewBox="0 0 496 512">
  <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
</svg>

So your markup becomes

<div class="kc-menu-container">
<nav class="kc-menu">
  <input type="checkbox" id="nav" class="hidden">
  <label for="nav" class="nav-open">
   <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" class="fa-caret-down d-icon custom-caret" height="15" width="15" viewBox="0 0 496 512">
     <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
   </svg>
   <span>
    Menu
   </span>
  </label>
  <div class="nav-container">
    <ul>
      <li><a href="https://otf.ca/knowledge">Knowledge Centre</a></li>
      <li><a href="https://share.otf.ca/latest">Discussion</a></li>
      <li><a href="https://otf.ca/knowledge/community-hubs">Community Hubs</a></li>
      <li><a href="https://otf.ca/knowledge/resources">Resources</a></li>
    </ul>
  </div>
</nav>
</div>

and add the following CSS to add some margins and control the color of the icon

.custom-caret {
  fill: white;
  margin: 0 10px;
}