feat(my-account): improve navigation on small screens

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR modifies the appearance of the navigation on small screens.

The header is now branded with the primary colour to clearly differentiate it from the front end and make it obvious that users are in a different part of the site. This is especially helpful on mobile, where things can get confusing more easily. Using the primary colour also ties in nicely with the menu when it’s open, since the current page is highlighted with the same colour.

I’ve tweaked the behaviour and padding of the navigation when it’s opened. There was an issue on very small screens (under 601px) where the menu’s top position was based on the admin bar. If the user scrolled, this caused a large gap because the admin bar isn’t fixed at that breakpoint.

I also made the header sticky so users can always access the navigation.

How to test the changes in this Pull Request:

1. Test my account, on small screens
2. Switch to this branch
3. Notice the changes I mentioned above

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?