Menu - hiding behaviour: hide menu items less agressively about jupiterbroadcasting.com HOT 9 CLOSED

So this looks like it just adjusts the breakpoint toggle, but that still only makes it either desktop layout or mobile layout.
I was trying to make it dynamically change the menu based on the width of the page.
Here is a sample I mocked up to demonstrate what I was trying to accomplish.
This is what I thought @gerbrent was originally looking for.

Hopefully you can see from the gif that as the window shrinks the extra menu items get added to a 'more' menu. When it finally hits the break point it goes into mobile mode.

from jupiterbroadcasting.com.

great idea, and see #88 for same (this topic should really be a separate ticket..)

from jupiterbroadcasting.com.

I started looking into this a little. It looks like the nav menu we are using (Bulma Navbar) doesn't have a clean way of truncating the links like you are requesting. From what I understand there are two layouts for this Navbar; Desktop and Mobile. Basically what is happening is when you shrink the width of the browser to a certain point it goes into mobile layout (with the hamburger). It looks to be an on or off type of deal (again from what I understand).

Part two of what you are asking for; Jupiter Broadcasting link can stay on the Navbar the entire time whether in desktop or mobile layout. I am pulling together a PR for this now. Should have something to submit by morning.

from jupiterbroadcasting.com.

@Lord0fBytes, I have no idea if this would actually be helpful at all or not, but Bulma has these helper classes to deal with different screen width.

from jupiterbroadcasting.com.

@kbondarev While that doesn't quite look like it will work the way we want; ironically it took me to somewhere where I did find some helpful information... the site's source code ;-P.
Look like it can be done with some fairly simple (may regret saying that) javascripting that checks the width of the screen and hides elements.

from jupiterbroadcasting.com.

@Lord0fBytes, no javascript required. These things are handled with CSS media queries. Or in this case just a single SASS variable to set for bulma, check the PR #107

Solution inspired by this stackoverflow answer

from jupiterbroadcasting.com.

Neat!

This is what I thought @gerbrent was originally looking for.

I think it's worth investigating possible solutions, and I was hopefully just inspiring some creativity around this problem. Seems to have worked ; )

The unfortunate reality is that we will likely have many menu items, so a consistent, reliable method to make them user-friendly is the goal here. Open to all suggestions and opinions, certainly not just mine.

from jupiterbroadcasting.com.

There’s also an options of having drop downs.
Maybe we should make “shows” drop down with a list of shows. Kinda like the current JB site. What do you think?

from jupiterbroadcasting.com.

Ya I am working on the drop downs in 88. I was planning on doing 'Shows' and 'People'

from jupiterbroadcasting.com.