Navbar start items are not properly aligned

[OriolAbril]

I noticed that #526 modified the alignment of the navbar brand so it looks nicer with texts, but since then I have been unable to align the logo and version number in the same row. It used to look like: https://arviz.readthedocs.io/en/v0.11.3/. Now it looks like https://arviz.readthedocs.io/en/latest/, I saw scipy is also having the same issue: https://scipy.github.io/devdocs/. The navbar becomes too wide and even eats up part of the content (see the search bar in the sidebar of the scipy docs).

I noticed that opening the dev tools with mozilla and unchecking the display of the .navbar-brand element fixes this:

is it possible to add this display: flex only when text is used? Should I overwrite that in a custom.css file instead?

[damianavila]

@choldgraf, since you introduced the display: flex change in #526, I would be interested to know your thoughts on this one.

[choldgraf]

Hmm, I cannot figure out what looks wrong. The logo looks aligned with the text to me in the two links that were provided, did they change?

[OriolAbril]

I fixed the ArviZ one, and it looks like scipy removed it. In ArviZ we are overriding the css, you can compare the behaviour between latest and https://python.arviz.org/en/v0.12.0. For scipy you can compare between the screenshots above though it is not as convenient as you can't inspect their source

[choldgraf]

ah ok - I think that if we added a CSS rule to make the navbar-start section be flex-displayed and centered, this should work as expected:

Something like:

div#navbar-start {
    display: flex;
    align-items: center;
}

I think we'd want this behavior by default for all of the major navbar sections