Drop down crisis

hello,

please see

https://forallthetime.com/v10/index.html#

full screen dropdown on events

smaller screen, hamburger,
no dropdown on events

not sure where my problem is

please help me out with the proper code…

i dont think it has to do with height :slight_smile:

THANKS!!

Nor am I! What problem are you seeing? On what platform? It all seems to work fine to me in Chrome.

I think OBXjuggler means on mobile phones as they don’t really handle hover effects well (because there is no such thing as hover on mobile - although there is a first touch which sometimes imitates hover). I get nothing on my iphone for the events link though.

I would suggest not using hover for anyone and instead create a click menu which will work on desktop and mobile and is much more accessible than trying to carefully navigate a hover menu when you have poor motor skills. That approach will solve all the problems. You could use some js to do this or one of the checkbox hacks.

Or alternatively just show the events sub menu by default on smaller screens although this doesn’t take into account larger screen laptops that are also hover only. Which means you’d need to do a test for touch before you do all that hover stuff (either in JS or the any:hover media query).

All in all hover menus are not an ideal menu system and best avoided. :slight_smile:

2 Likes

Oh, okay. There seemed to just be a hamburger for small screens that works with a click, so I was confused.

1 Like

Yes I believe it was the events hover drop-down that was the issue :slight_smile:

1 Like

First, i thank you

sorry, i am not familiar with your thoughts :frowning:

more learning to do!

if you can, send a full codpen, i would MOST appreciate it :slight_smile:

also leave comments so i can take something away from these concepts

BTW, after this project, and some others, i am diving DEEP into HTML and CSS.

i do have a resource for an introduction and someone here recomended some site point books

i want to create my own sites, not depend on code pen

i want to be as good as you, Paul!!!

one more time…

thank you!

This codepen was from an old thread and is using jquery for the dropdowns (because there are multiple levels) but it shows you the concept anyway.

Close the window smaller to see the small screen version