Header Bar and Color Strip cause UI/UX glitches

[TheTripleV]

The header bar and color strip cause instances of bad ui:

On Desktop:

The color strip overlaps with the top of the left scroll bar. Also, depending on the screen/browser resolution, some of the top links disappear.

On mobile:

The color strip overlaps with the navigation due to overscroll.

Possible Solutions:

1. Do not show the color strip above the nav menu.

2. Move color strip to nav side bar.

3. Use color strip as the separator between the path and the title (don't really like this one)

The links to the Game Manual, Q & A, and 2014 Archive do not exist on mobile.

Possible Solution:

Put those links on the homepage or on the left navbar. The game manual shouldn't ever be hidden on mobile.

[Daltz333]

@koconnor

[Kevin-OConnor]

As part of the FLL re-brand the color strip is no longer a recommended asset. I'm holding off re-styling frc-docs for a little bit to see if we can maintain consistency with whatever we do for FRC-events.

[ItayZiv]

I don't seem to see the bar on mobile? Not really sure whats going on with that, it seems like the screenshot if from an iPad? afaik those use the desktop version by default, still an issue but doesn't seem to be relevant with the mobile version...

[TheTripleV]

The RTD theme seems to switch between mobile and desktop view purely based on the viewport resolution, not based on the actual type of device you are on. That screenshot was taken on an iPhone in landscape. Mobile Mode / Desktop Mode don't actually do anything for the docs.

[Kevin-OConnor]

Like I said, the color strip is likely going away soon (though not quite yet), so I'm not going to dive into trying to fix this. Also, as an FYI, this seems to be a Safari related issue as it doesn't repro on Desktop for me in IE, Chrome or Firefox and the "Iphone issue" you are showing doesn't seem to replicate in Chrome or FF dev tools at any resolution I have tried or on my Galaxy S8+ in landscape.

[TheTripleV]

No worries; No rush.
It is probably just due to the overscroll behavior in WebKit as it happens on Safari/Chrome (iOS).

[sciencewhiz]

It also doesn't occur in mobile safari on my iPhone SE (probably too low of resolution to trigger desktop)

[Kevin-OConnor]

Looks like FRC Events is keeping the color strip for now, though we need to update to the new 3 color strip (instead of 4). I think Option 1 above keeps things most consistent looking with other FIRST sites.