Header logo is smaller after upgrading to 2.2.0.beta5

Support
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?

1 Like
3

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. 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;
}
2 Likes
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;
}
5 Likes
7

Thanks for your prompt help!

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.