Center site nav at widths < 900px

advancedwpuser / awp-2015

WordPress Theme for the advancedwp.org website for 2015

MIT License

4 stars 2 forks source link

Center site nav at widths < 900px #7

Open kevinwhoffman opened 9 years ago

kevinwhoffman commented 9 years ago

Site nav is currently aligned left at smaller widths shown below. Page balance and composition could be improved by centering the nav at the 900px breakpoint.

advancedwpuser commented 9 years ago

I'd actually like to implement the Menu with a slide-down on smaller width screens. Like this one: http://codepen.io/surjithctly/pen/pLDwe

That would also mean centering the menu, and I like this method because it's Pure CSS, though a JS solution MIGHT have better browser support.

kevinwhoffman commented 9 years ago

Agreed a mobile nav solution is needed as well, but I was addressing the "tablet nav" scenario in between desktop and mobile - the point at which the logo pops above the nav and the nav slides below shown in the screenshot. IMO the full nav should be kept visible as long as possible before hiding it with a toggle.

Three breakpoints I'm proposing:

palm - logo left-aligned, toggle right-aligned, nav revealed from above
lap - logo top center-aligned, nav bottom center-aligned
desk - logo left-aligned, nav right-aligned

mathetos commented 9 years ago

Since it's built on Foundation, and we're planning to implement Gulp/SASS we should do all breakpoints according to Foundation's breakpoint: http://foundation.zurb.com/docs/media-queries.html

kevinwhoffman commented 9 years ago

Those were just conceptual breakpoints. Substitute palm/lap/desk with Foundation's small/medium/large breakpoints.