Title Alignment with Long Title on Small Screen


Is there a way to improve the alignment of the header bar when the page title is long, on a small screen. Currently when the nav burger touches the text, the text is realigned below the nav burger, but when the width is reduced more, the text wraps. This looks messy and takes up extra screen space.

It would be great if the text wrapped first, and then only got re-aligned below the nav burger when the width reduced even more. Also, when the text wraps it would be nice to have the background bar expanded to compensate for the two-line heading.

Thanks for a great free theme!


There is no one-size-fits-all solution. As you can see it fits perfectly for our theme demo. I could try to help you with your specific case as well but for that I absolutely must see your website because I am not magician.

Oops, meant to say that site is balally.com. The demo works great as it has a short name, but with longer name it is not as clean.

Add this code to Appearance >> Theme Options >> Other >> Custom CSS:

@media (max-width: 767px) {
  .navbar .container .navbar-brand {
    font-size: 14px;

This code will make your website title smaller but only for mobile devices. It will be still readable, so don’t worry. If it still doesn’t fit any a very tiny devices you can reduce font size even further.

Let me know if this helps.

Perfect. Much simpler solution than the approach I had tried. Thanks