Header navigation hover state overflows the header

[nahurst]

The black hover state you see when hovering over header navigation links is bigger than the header. This happens on the latest Chrome and Firefox on OS X.

[juliaelman]

@nahurst thanks for pointing this out! I believe this is an intentional design decision by the original creator, hence the drop-shadow effect around the button.

@minamarkham @Cara-Jo thoughts on this? Is this something we want to change?

[kstack7]

I also thought this was intentional On Feb 13, 2015 6:13 PM, "Julia Elman" notifications@github.com wrote:

@nahurst https://github.com/nahurst thanks for pointing this out! I believe this is an intentional design decision by the original creator, hence the drop-shadow effect around the button.

@minamarkham https://github.com/minamarkham @Cara-Jo https://github.com/Cara-Jo thoughts on this? Is this something we want to change?

— Reply to this email directly or view it on GitHub https://github.com/girldevelopit/gdi-new-site/issues/221#issuecomment-74343949 .

[minamarkham]

Pretty sure it's intentional, but just in case, here's what it looks like "fixed":

[Cara-Jo]

It is an intentional design decision. H0wever, the drop shadow is not consistent with any other branding guidelines that we have in place. So I'm up for removing the drop shadow, but I kind of like the tab look.

[juliaelman]

@Cara-Jo cool! Thank you for your feedback :dancer:

@nahurst thoughts?

[nahurst]

I like the newer/aligned version.

[kstack7]

Is that new example totally aligned? Seems a pixel off still...

[minamarkham]

I think it is. It was a quick and dirty in the browser mockup.

[kstack7]

OH okay! That's fair just hoping that was seen by all haha

I feel like I can't unsee the tabs now though! Aligned seems too plain...

[kstack7]

Where do we stand with this? Love/hate the tab look? Let's finalize or close this :)

[therufs]

Is there a place we can see the tab version w/o the drop shadow?

[kstack7]

I think the best option is to use DevTools (I prefer Chrome) to disable the CSS

@ media screen and (min-width: 500px) header nav a:hover { background-color: #282828; color: #fbcfc6; /* box-shadow: 0.025rem 0.025rem 0.5rem #282828; */ }

This is the result when hovering and active:

[kstack7]

^ woops haha put a space between @ and media to not activate the tag

[DBNess]

:+1: to removing the drop shadow! thanks @kstack7. I could take or leave the oversized tabs - I agree with @nahurst that they looked a bit like a bug before, but they look cleaner without the drop shadow so I'd be okay leaving them if @Cara-Jo & others would like to, or I'd be down for a slimmed version like what @minamarkham proposed.

tl:dr; win-win-win but drop the drop shadow?

[kstack7]

Yeah I think what kept them from looking like a bug to me is the fact the text centered when hovered/active. Otherwise I think it'd look way off. I'm down with dropping the shadow and leaving the rest as it is :+1:

[therufs]

I feel like it looks a little less polished without the shadow, but agree it doesn't go with anything else. Herm.

Either way, another :+1: for tabs :)

[kstack7]

Shadows-be-gone: https://girl-develop-it-staging.herokuapp.com/

[DBNess]

\o/!

On Wednesday, May 13, 2015, Kristen notifications@github.com wrote:

Shadows-be-gone: https://girl-develop-it-staging.herokuapp.com/

— Reply to this email directly or view it on GitHub https://github.com/girldevelopit/gdi-new-site/issues/221#issuecomment-101515365 .

Vanessa Hurst Co-Founder | Girl Develop It http://www.girldevelopit.com | @girldevelopit http://twitter.com/girldevelopit

Girl Develop It http://girldevelopit.com/ teaches women to code in over 45 cities CodeMontage http://www.codemontage.com/ empowers coders to change the world Women coders break new ground, and stereotypes - TODAY show http://www.today.com/video/today/53924117