Need help with a non-functional mobile only nav menu

[santafe]

Hello,
I am working on a making my website responsive, but have run into an issue with the nav menu.
If you view the following page:
http://www.pabriles.com/chisels.html
on something other than an iPhone (or a browser-width >480px), you should find that the menu works correctly. However, if you view the same page on an iPhone you will see that the nav menu does not work correctly. The nav menu is at the very bottom of the page, so you will have to scroll down to see it (on an iPhone).
I think that if I turn the menu into a simple linked-list, it may work, but I have not tried that yet. I am not fond of the nav menu being at the bottom of the page, but I do not know of any other way to do this and still keep the layout as simple as possible.
All comments and suggestions are most welcome.
Thanks,
Phillip

[Shikkediel]

Since the menu functions with mouse hover, it won’t work on any kind of touch device (not just iPhone). It would need some JavaScript to make it respond to tapping. I don’t think the double scrolling on the page is very user friendly (or needed) by the way.

[santafe]

@Shikkediel

Thanks for the info as I was not aware of that. If I am thinking correctly, this will have to go into my media query. I appreciate the help.

[Shikkediel]

Touch support is a job for JavaScript though, CSS can’t detect or trigger those. It wouldn’t be a whole lot of script (but definitely a bit of work) – and making it dependent on screen size isn’t really necessary. There are quite a few touch devices with screen dimensions equal to desktop. Here’s a more ‘extreme’ example of something similar I recently made :

http://codepen.io/Shikkediel/pen/LEyYpp

I could have a go at the menu on your site if you like (in jQuery).

[Paulie_D]

Moving to JS Jungle

[santafe]

@Shikkediel
Thanks once again for your in-depth reply. Your comments have been an eye-opener for me for sure. I appreciate your jQuery offer, but for the time being I would like to stick with a purely CSS approach to this. I think my solution is to have a separate non-hover nav bar stylesheet triggered from my @media query. I will try this and see how it goes.

Thanks again for all of your help.

P.S. I have tried to mark this thread as SOLVED, but cannot seem to figure out how to do this as I see no checkbox to mark as solved. Thanks.

[Shikkediel]

Only the mods can change the topic title like that, I guess it’s not the biggest though. Gimme a shout (here) if you decide to go jQuery.

Cheers

[Paulie_D]

I think the OP can change the title too as they can edit any of their own posts.

[santafe]

@Shikkediel
Thanks for the info on marking the thread as ‘Solved’.
I, once again, am humbled by your offer of support and have one final question for you. If you take a look at Apple.com on an iPhone or similar mobile device, you will note their nav bar at the top. When you tap the left-side icon the nav titles fold down. From there you are able to finger-scroll the nav title’s horizontally. My question is this: Can that be done with purely CSS or does it require some jQuery?

Thanks!

[Shikkediel]

@Paulie_D, regular members only have a certain amount of time before the edit option on the posts is disabled…

@santafe, this doesn’t sound like something that could be achieved with CSS only. Especially the tap but also specific scroll adaptations (other than caused by ‘normal’ element overflow) and swiping are a job for JavaScript. Thing is, I (moderately) know how to program for touch events but don’t actually have such a device myself, lol. I usually double check with mousedown if it works – or ask for feedback. Anyway, I am not able to see the Apple.com page like you described because of this. Their site doesn’t seem to respond much to resizing either. I can’t imagine they are that much behind on things – they must have some other approach to make a distinguishment (usually JavaScript as well).

[santafe]

@Shikkediel
Thanks for the feedback.
I think I am putting the cart in front of the horse by wanting all of this cool stuff in one fell swoop. (Disclosure: This is my very first website built from purely HTML/CSS. All of my past site experience has been using Rapidweaver, so I should be grateful that I have achieved what I have thus far.)
I appreicate your time and help.

Phillip

[Shikkediel]

No problem. It’s a good approach to keep JavaScript off as much as possible – if it can be coded in HTML and CSS, that definitely has the preference. Sometimes it’s unavoidable though but not a bad thing in itself as long as you don’t overdo it (which is often tempting because one can really do great stuff with it).

[Author]

Posts