Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page navigation needs rethinking at 600px media-query. #205

Open
kleinmaetschke opened this issue Feb 7, 2013 · 8 comments
Open

Page navigation needs rethinking at 600px media-query. #205

kleinmaetschke opened this issue Feb 7, 2013 · 8 comments

Comments

@kleinmaetschke
Copy link
Contributor

@kleinmaetschke kleinmaetschke commented Feb 7, 2013

At the 600px media-query level (iPad in various orientations), the navigation looks very disorienting.

jQuery iPad nav example

We need to address how to go about making the navigation/search area look nice at this mid-range screen size.

Personally, I feel it is too large for us to use the select button, but shrinking font-size on nav items on sites like jQueryUI leaves the nav items very small and almost illegible.

@toddparker
Copy link

@toddparker toddparker commented Feb 7, 2013

I agree. Maybe we could consider moving the search box up so it's floated right, at the same level as the logo, so the navigation can go full width.

@scottgonzalez
Copy link
Member

@scottgonzalez scottgonzalez commented Feb 7, 2013

Keep in mind that the area to the right of the logo will be used for announcements like upcoming events.

@kleinmaetschke
Copy link
Contributor Author

@kleinmaetschke kleinmaetschke commented Feb 7, 2013

Very important note, @scottgonzalez. Hrm. How much space will these notifications take up? Potentially all of it?

@rdworth
Copy link
Contributor

@rdworth rdworth commented Feb 7, 2013

Here's a comp showing it:

comp

@kleinmaetschke
Copy link
Contributor Author

@kleinmaetschke kleinmaetschke commented Feb 7, 2013

Thanks, @rdworth. Definitely not going to be room there, then. Perhaps there's a better way to do the navigation and keep search in its place?

@kleinmaetschke
Copy link
Contributor Author

@kleinmaetschke kleinmaetschke commented Feb 7, 2013

We could do a drop down I suppose, as opposed to a select?

@toddparker
Copy link

@toddparker toddparker commented Feb 7, 2013

Ah-ha. Well then my suggestion was a terrible idea. :)

The nav links are really messy right now across breakpoints so some sort of a re-think is needed. One option would be build a horizontal nav so it shows as many items as it can, the drops in a "more v" menu for the overflow. At some narrow breakpoint point, we'd want to switch to a full on menu but seeing some of the links might be nice. We could try and order them with the most frequently used ones first.

The search box can probably be a bit less wide too.

@kleinmaetschke
Copy link
Contributor Author

@kleinmaetschke kleinmaetschke commented Feb 7, 2013

I agree, the nav links are messy at break points. Creating a dynamic more menu and ordering by use is a bit beyond my coding prowess.

If the search box width is shrunk a bit and the nav links font-size goes down to 14px, we gain a bit of space and only have one or two hanging nav items.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants