code to overwrite navigation on entire site?

[mlegg]

I made this website (http://stnickporticons.com/) for free for my church in 2007 before mobile and responsive design were much of a thought. It has about 60 pages and they would like me to change the code to make the website responsive and have a responsive menu. Without changing that many pages, is there a way to have a code that once you go to the site overrides all the navigation? Changing the css single sheet will be easy enough.

I ask because this was a freebie for them and before I spend a lot of time all over again was hoping for an easy way out.
thanks

[jscheuer1]

Define "overrides all the navigation".

Not being certain what you mean, .htaccess or other server side directives come to mind, as does javascript and/or css device/screen detection methods. None of these are 'simple' though. At best they require construction of one or more additional 'shadow' or 'sister' sites to accommodate navigation from/to for these other devices. You end up having 2, 3, or more duplicate pages for each page on the site, each catering to a particular device/screen. Far better to just make the site accessible. This does not necessarily mean responsive - which I think is a pain in the butt, though possible. It just means making the pages workable across devices. Accessible. They don't have to be works of art. This can mean abandoning a lot of formatting and allowing the user to - if necessary, utilize his/her own browser's features to optimize viewing of any give page.

[mlegg]

By over write, I mean have an all new nav menu. I was just hoping that there was a code that could somehow redo all the navigation without me having to recode every single page. I think that I will just do that and tell them it will take me a while to redo it.
thanks

[jscheuer1]

That's not what I was thinking. Yes, if the menu already uses a css and/or a javascript file that's shared among all the pages, then you could change one or both of those. If the menu is an include, you could change the include. If none of those things are available/workable, you could target the markup of the menu with say - css or javascript, to make it not be there, not be seen, then you could replace it without actually having to remove it.

In any case the menu in use on that site looks to be called (something like) Pure CSS Menu* (that's judging by the name of the css class it uses). It's controlled (one would think) entirely by css, which in this case is in the common styles.css file in the root of the site, so you could take charge of it from there. I guess you could use media queries to get rid of it on mobiles. Or use jQuery (pages already use version 1.3 I think) to make it more functional on mobiles. The problem I see is that it uses hover css, which works fine on PC's with mice/trackballs, those sort of things. But on a touch only device, you would tap to get a dropdown (hopefully), but it would just stay there until you tapped somewhere else, and then, perhaps only if you were lucky, it would finally go away. The site might be navigable, but not pretty.


* Yes looks like:

http://purecssmenu.com

There might be info somewhere about making it more mobile friendly.

[Beverleyh]

Re: the hover CSS that activates menu dropdowns.

On Android, the dropdown will hide again when you tap elsewhere. On iOS they won't natively, but here's a line of JS that fixes it http://www.dynamicdrive.com/forums/entry.php?335-iOS-Sticky-Hover-Fix-Unhovering-dropdown-CSS-menus It may or may not be something you can use.