Add "who we are" link or button below the header for mobile

[benlk]

Add "Who we are" link or button below the header for mobile (this way people don't have to press hamburger menu to see).

This should:

• be user-configurable
• only appear on mobile viewports where the sticky nav collapses to its "phone" presentation

Tasks:

• register a new menu position, appropriately documented, that presents these links
• figure out where Largo collapses the sticky nav to the phone presentation
• style the menu output appropriately.

[benlk]

For the "Who we are" link on the header in mobile, ideally we'd like to switch this out when we want to to say "About" (we changed to about instead of who we are) or newsletter or donate. Can it function like this? I'm fine with it either being a widget or a menu, it doesn't matter...maybe a widget? I guess whatever is easier for you guys. Appearance-wise, I think it could be our orange that we are using on the site #fb6927 and let's try a slightly heavier font-weight.

Largo collapses it at 768px and below, so that's min-width: 769px for a display: none;

This should appear on all pages, which means it can't use the "Homepage Alert" widget area, since that's only available on the homepage.

add_action( 'largo_main_top', whatever ): https://github.com/INN/largo/blob/0.5-dev/header.php#L132

[benlk]

as a text or custom HTML widget in a custom widget area, to only be displayed when the sticky nav is showing. Because widgets go in widget areas, is there a name for the widget area that would make most sense to you for the name of a widget area that appears at the top of the page on mobile devices? It's like the Homepage Alert widget area, but it would display on more places than the homepage. (We could allow the widget area to display on non-mobile pages as well, functionally turning it into a sitewide alert area that is used with a widget that only displays on mobile to show the mobile "About us" link button.) What are your thoughts in this area?

I'm a bit confused on the functionality of it only showing when the sticky nav appears. Would it appear when a user first enters the site on mobile and the header displays?

Now that I look back at my original design for this, I think the words should be in our PS blue that we use for our links #418cff and the font weight can be the same we use for button text on our site, because the donate button next to it will be orange.

I've attached the original design for how we want the header on mobile to look, the only difference is the wording, should say ABOUT and DONATE for the button please. In terms of making the ABOUT (formerly Who we are text) shown on Desktop would be redundant because it's currently in our main navigation and would show up twice.I think the addition of the DONATE button in the desktop header is good enough

So here's the aspects of this task that weren't captured in the SOW:

• Remove search from sticky nav, move to mobile nav
• "About" link goes in sticky nav, not outside of it