Styling of Menu (Desktop and Mobile)

[erynrat]

Hi all,

Thanks for all of your great work on this site so far. I'm hoping that by coming in and adding a few more design-focused edits, we can get the site looking its best. :) See below for my changes:

Desktop Menu:

• Add a transition to the fill / hover state of the Donate button. Maybe .3 or .4 seconds?
• Make the donate button shorter, more like this:
• Add hover state to "Our Mission" so it becomes 25% lighter than original color.
• Add 50% more space between Our Mission and Donate Button.
• Make logo 50% larger (meaning the white nav bar may have to get slightly bigger but mainly the logo should just take up more space and be a little closer to the white nav bar's edges.

Tablet Menu:

• Make logo 25% larger and make sure it is centered in the white nav bar vertically My design:

Current look:

• In pop-up menu, delete the 'Home' option as people will know to tap the logo.
• In the pop-up menu, list Our Mission first then have Donate in a button similar to that of the desktop version. Here is my design (with more pages than TTF currently has):
• Add more space between each menu item
• Make sure X in upper left corner is in the same location as the hamburger menu icon - Is it possible to make the hamburger menu icon animate into the X so they seem to be one thing?

Mobile Menu:

• Logo should have a little more left margin
• Make sure logo is centered in white nav bar, it looks too high right now
• Same issues as Tablet menu for the most part.

Any questions, let me know!

[erynrat]

@joelwass Can you remind me how to label these? I don't see the checkbox that this article is referring to: https://help.github.com/en/github/managing-your-work-on-github/applying-labels-to-issues-and-pull-requests

[neusaguera]

I can work on this!

[deepankkartikey]

@erynrat @neusaguera Has this issue been addressed?

[joelwass]

Yes! sorry @deepank120896 sometimes github doesn't auto close issues