• In the days ahead we will be doing a mass pruning of user accounts that have never posted in the forums. If you have not yet posted, please do so soon to prevent your account from being deleted!

XenForo 2 Swap Logo for Text on Small / Mobile Devices

With the introduction of XenForo 2.0 a new 'sticky' navbar was added. When viewed on small devices, by default 650px or less, the full size logo in the header does not show up and instead the logo is shown on the sticky navbar. For some logos that is not a problem but for anybody using a large logo, or a logo that is intricate, showing the logo in the navbar shrunken down really tiny can be a problem.

Before.PNG


There are few different ways of tackling the issue, such as modifying the template to point to a different URL for the 'smallLogo' in the navabar.

For my purposes I went with a different approach. Instead of displaying any image I instead will display text instead. This solution allows it to be completely CSS based with no template modifications, it makes it easy to change, and there are no concerns about image dimensions.

In your ACP modify your "extra.less" template and add the following bits of CSS definitions.

First, remove the default image from showing...
Code:
.p-nav-smallLogo img {
    display: none;
}
Now here is where we actually add the text to be displayed. The value "{$xf.options.boardTitle}" will display your forum name as defined in your ACP. You can change it to anything you like, especially if your forum name is pretty long.
Code:
.p-nav-smallLogo a::before {
  content: "{$xf.options.boardTitle}";
  visibility: visible;
  font-size: initial;
}
By default the size of the link container will be restricted to the size of your normal image logo shrunken down so your text might wordwrap. No problem we can expand the width, turn off word wrap,and hide any overflow...
Code:
@media (max-width: @xf-responsiveMedium) {
    .p-nav-smallLogo {
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
Finally we have one final optional thing to do. When hovering over the text link you might not want it to have the underline show up like links usually do. No problem, just set the text decoration to none...
Code:
.p-nav-smallLogo a {
  text-decoration: none;
}
That's it, all done. Your forum name will now show instead of the logo.

After.PNG


Now for some fun! If you have converted your XenForo database to support emoji you can choose to show emoji instead of text! Simply replace {$xf.options.boardTitle} with the characters of choice. In our case Alien Soup can be fully represented in emoji with 👽🍲.

Emoji.PNG


Here's the complete code we are using here in our extra.less file.
Code:
.p-nav-smallLogo img {
    display: none;
}
p-nav-smallLogo a::before {
  content: "👽🍲";
  visibility: visible;
  font-size: initial;
}
@media (max-width: @xf-responsiveMedium) {
    .p-nav-smallLogo {
        max-width: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
.p-nav-smallLogo a {
  text-decoration: none;
}
Author
Kevin
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from Kevin