Fix header bug when resizing

[pitag-ha]

This would be a good first issue for anyone looking to get started improving and contributing to OCaml.org.

Currently, when resizing the browser window to 976x_, the header looks as follows:

I.e., the search bar pops into a second line and messes up the header height. As a result the header covers the top of the body (in this case "Learn"). This bug can't be reproduced in responsive dev tool mode. I'm not 100% sure why, but it might be because of the overlay of the scroll bar in that mode.

This issue consists in fixing that bug.

[pitag-ha]

@TildaDares , would you be interested in this issue? If you can't reproduce the problem described (or aren't interested for another reason), let us know and we find you another issue.

[TildaDares]

@pitag-ha Yes I'd like to work on it.

[nibble0101]

This bug can't be reproduced in responsive dev tool mode

I think one possible way of investigating it is to open the browser console and set the browser width in the range 980px - 993px because it happens when the browser width is in that range.

[TildaDares]

This bug can't be reproduced in responsive dev tool mode

I think one possible way of investigating it is to open the browser console and set the browser width in the range 980px - 993px because it happens when the browser width is in that range.

Were you able to reproduce the bug locally or on the live site? When I use dev tools on the local site, it looks like this:

But it looks normal when I do the same thing on the live site.

[0xull]

Hello @pitag-ha, @TildaDares, @patricoferris, @nibble0101 and @olleolleolle

While working on #1305 issue, I noticed the header bug and did the due diligence of fixing it alongside the issue I was working on. Already made a PR to it currently, #1326. Sorry for saying this late, just going through the issues now and notice the discussion on the bug.

[esticojerry]

Hello, it actually looks normal when i viewed it on my browser, even on my phone. anyway will there still be need to work on it?

[pitag-ha]

The issue still persists, but it's hard to reproduce. It only happens on the browser and for one concrete width (976). It doesn't occur when using the responsive dev tool.

@IkehAkinyemi has already written the fix for this issue. It got mixed up with other improvements to the site (concretely, with the fix of issue #1305). It hasn't been merged into master yet. @IkehAkinyemi is working on it and will open another PR. By the way, @IkehAkinyemi : please, open your PRs against master, not against staging :)