Responsive nav bar

[colinkiama]

Fixes #3056

Changes Summary

• Adds hamburger menu at mobile breakpoints
• Fully expanded menu shows by default when JavaScript is unavailable
• Hamburger menu disappears and regular menu layout returns at a viewport width of 800px or higher.

This pull request is ready for review.

[colinkiama]

Here are screenshots of the changes:

[RMcNeely]

Did you have a formatter run on the files here? The PR shows a lot of miscellaneous file changes that seem to be unaffiliated with the rest of the changes (whitespace and "). Is it possible to revert those changes?

[colinkiama]

Did you have a formatter run on the files here? The PR shows a lot of miscellaneous file changes that seem to be unaffiliated with the rest of the changes (whitespace and "). Is it possible to revert those changes?

Those unrelated files that have been updated are where I used the auto-fix commands of the linting tools for CSS and JavaScript in the project (stylelint and ESLint respectively).

Reverting these changes will cause the CI tests to fail during the lint check stages.

So unfortunately, no. It won't be possible to revert the changes.

[colinkiama]

As requested, I've reverted the formatting changes. Only changes now are directly related to the issue this pull request solves

[RMcNeely]

Thanks Colin! This is a big improvement on what used to be there.

[RMcNeely]

Almost perfect, can you give the logomark a defined height of 48px so it matches the other items lineheight?

[colinkiama]

Almost perfect, can you give the logomark a defined height of 48px so it matches the other items lineheight?

Unfortuantely setting the height or/and line-height of the logo causes misalignment issues:

I could try work around this by using setting the logomark as a flexbox. What do you think? Is it worth it?

[colinkiama]

Never mind, I figured it out