Navbar items overlap with brand text when window is narrow

[bheberlein]

In my conf.py, I provided a logo and also set html_theme_options['logo']['text'] to a rather long value (e.g. 'My Package Documentation').

I noticed that, when the window becomes sufficiently narrow, the section links in the header start to overlap on the left with the brand text. This seems like it should be considered a bug.

I was able to solve it with the following:

.navbar-brand, div#navbar-start {
    flex-shrink: 0;
}

.navbar-header-items {
    flex-shrink: 1;
}

Is there a reason why this is not the default styling for the theme? Am I unwittingly breaking other features by doing this? It seems to retain the key theme behaviors as far as I can tell.

[12rambau]

No specific reason that I can think of and your solution seems to work nicely. If you want credit for your findings, please open a PR and we'll be able to review it!

[maxnoe]

It seems this issue re-appeared in the latest 0.16 release:

[maxnoe]

This seems to happen only for particularly wide logos, hinting at an interplay between the img and the text.

The img is set to max-width: 100% although in case where the text is not empty, it should probably be less than 100%.

[maxnoe]

I could fix this by changing height: 100% to max-height: 100%, setting min-width: 0 and flex-shrink: 1 and making sure the parent elements are set to width: 100%:

/* prevent logo from being to wide and text clashing with next item */

.navbar-header-items__start .navbar-item {
  width: 100%;
}

.navbar-item .navbar-brand {
  width: 100%;
}

.navbar-brand img {
  min-width: 0;
  height: auto;
  max-height: 100%;
  flex-shrink: 1;
}

.navbar-brand p {
  flex: 0 1 auto;
}