Nice Navigation but not quite working (is anyone seeing this?)

[Creative]

For those (like me) who want to have more options for navigation in Blocs projects, I found a very nice nav bar which works well in Blocs. It features some nice hover effects and a nice dropdown sub-menu activated on hover. Here’s a link to the project on the server:

Nice Nav Bar in Blocs Project - live on server

It’s mostly CSS but there’s a small bit of JS controlling it. It works exactly the way it’s supposed to from 600px and down, but I can’t figure out why the dropdown sub-menu won’t open on mouseover above 600px. Be sure to resize your screen width until it’s below 600px so the hamburger menu appears. As I said, the drodown on hover sub-menu works perfect there. But try it again above 600px from the main nav (not mobile). The sub-menu won’t activate on hover for some reason. Anyone know why? @Norm ? @Eldar ? @Flashman ? @casey1823 ?

Responsive Nav with javascript dropdown effect

If anyone has a moment to look at this, I’d sure appreciate any help. I’ve included the entire Blocs project for download (below) as well as these screenshots which show the nav menu in various states and breakpoints:

Normal (over 600px) State:

Mobile (under 600px) State 1(initial):

Mobile (under 600px) State 2(clicked):

Mobile (under 600px) State 3(dropdown hovered over):

And finally, here’s the Blocs project file, along with the above screenshots.

Experimental-nav-menu.zip (55.3 KB)

[hendon52]

I think the assumption made by Blocs is that a hamburger menu when appearing at smaller screen sizes is only able to accept a click or tap to activate it. This is because hamburger menus are generally only used on mobile devices and touch screen tablets. Clearly, there can be no hover function on a touch screen device so the facility probably isn’t there as standard. You may be able to change this behaviour at code level.

[Creative]

@hendon52, you may be on to something there… interestingly though, the nav menu works great on mobile (below 600px). It’s larger than that that the dropdown menu won’t open on hover (or click). I do appreciate your taking a look at this. It’s a decent-looking menu bar I think, do you agree? I think in the bigger picture, I like knowing that we can find pre-made elements (built in bootstrap) like this nav bar, and simply then paste the code into Blocs and use them. That’s exciting to me as it opens up many new options.