Links by FriendsOfFlarum is a wonderful extension that nearly every Flarum board uses because we like it when users can easily find the important things. But if you're like me, you want to fit just a few too many things for it to handle gracefully at all sizes.
This affront to well-proportioned margins everywhere might make you consider downsizing to make everything fit, but you absolutely don't need to. Assuming your logo is like Flarum's own (with a symbol preceding some text) you can remove the text with CSS to free up some space and fix the widths that the header breaks at.
This is the CSS I used:
@media (min-width: 768px) and (max-width: 1050px) {
a#home-link {
display: inline-block;
width: 30px;
overflow: hidden;
}
}
Some caveats:
- Flarum displays logos at 30 pixels high. Reducing the
width to 30px here assumes that your logo's symbol is a perfect square. If it's longer or shorter than this then you will need to adjust the number accordingly.
- The exact page width when things will start buckling depends on exactly how long your logo and links are combined. For me this was 1038px. So you might need to experiment with the
max-width value a bit.
