Header logo is smaller after upgrading to 2.2.0.beta5

Product Support

AI-generated summary

The update to Discourse 2.2.0.beta5 has caused zapata_36’s header logo to shrink considerably. jomaxro suspects it may be related to a recent CSS change that shrinks the logo. To fix this, Johani suggests adding the following CSS to the theme:

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

This will allow the logo to increase in size up to the dimensions specified in the theme. Johani also notes that the logo size on mobile is set in the theme and provides guidance on how to adjust it. Additionally, Johani mentions that the caret icon is broken due to changes in how FontAwesome icons are handled, and provides a solution to fix it.

1

This update seems to have shrunk my header logo considerably. On both my English and French themes.
Any idea why? I can’t seem to figure out what might have changed.

2

Hard to say without more details. Can you share a screenshot, or ideally a link to your site?

3

https://share.otf.ca/

It also broke the mobile theming in the header (menus). Which seems to be a result of the much smaller site logo in the header.

4

Looks related to Mobile logo in header broken - #14 by Johani. The CSS shrinking the logo is below, added to Discourse 6 days ago. Going to ask @Johani to take a look when he’s online. You may simply need to override that CSS in your theme, or we may be able to fix it in Discourse, not sure.

.d-header #site-logo {
    height: 2.57em;
}
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;
}
7

Thanks for your prompt help!