Multi-row navbar occludes page content

[wroyca]

The GitHub icon causes Poxy to incorrectly overlaps with long project description, as shown below:

[marzer]

O_O

I... I don't even know where to start with this, hah. The github icon shouldn't have any impact on the page flow at all, it's just the background-image CSS attribute.

How did you generate the second image, without the issue?

[wroyca]

O_O

I... I don't even know where to start with this, hah. The github icon shouldn't have any impact on the page flow at all, it's just the background-image CSS attribute.

How did you generate the second image, without the issue?

Disabling margin-top in h1, h2, h3, h4, h5, h6 corrects the problem to some extent (not perfect) :

The second image was generated by refreshing before completion, just before the logo is available to be shown

Note: the issue can't be reproduced with m.css

h1, h2, h3, h4, h5, h6 {
  /* margin-top: 0; */
  font-weight: 600;
}

m.css (left):

[marzer]

Note: the issue can't be reproduced with m.css

Yeah; I modified the page header to stay fixed in place at the top of the window, whereas m.css leaves it just as a regular, non-floating page element. For this to work I had to increase the top ~margin~ padding of the page content by the regular height of the navbar so that when you're viewing the top of the window it looks 'vanilla'. I suspect the root of the issue here is actually that you're seeing a two-row header, and my CSS adjustments don't take that possibility into account.

[marzer]

I won't have time to engineer a decent fix for this until at least this weekend, but you can add an override to some custom CSS of your own to restore the m.css behaviour:

body
{
    padding-top: initial !important;
}

body > header
{
    position: initial !important;
}

[marzer]

using the CSS overrides above:

[wroyca]

I won't have time to engineer a decent fix for this until at least this weekend, but you can add an override to some custom CSS of your own to restore the m.css behaviour:

body
{
  padding-top: initial !important;
}

body > header
{
  position: initial !important;
}

It's ok, there's no rush, thanks for the alternative 👍