5 replies [Last post]
Pauhana
Pauhana's picture
Offline
newbie
Last seen: 36 weeks 4 days ago
Timezone: GMT-8
Joined: 2018-02-13
Posts: 4
Points: 5

Hey all.

In trying to finalize a Wordpress site I've been working on, I noticed that the menu rendered on small devices is completely wonky. Not sure why the see-through nature of the menu content, nor why the hierarchy is not being maintained correctly. If someone could clue me in as to what's going on, I'd appreciate it. Also, any recommendations for what to use for navigation styling of small screen devices would be great.

(Apologies for the various commented out garbage within the css code; I have yet to perform final cleanup of things...).

Thanks much!

Pauhana
Pauhana's picture
Offline
newbie
Last seen: 36 weeks 4 days ago
Timezone: GMT-8
Joined: 2018-02-13
Posts: 4
Points: 5

Sorry, it might help to

Sorry, it might help to actually include a link to the site, no? Big smile

siliconvalleyseeds.org

Pauhana
Pauhana's picture
Offline
newbie
Last seen: 36 weeks 4 days ago
Timezone: GMT-8
Joined: 2018-02-13
Posts: 4
Points: 5

No suggestions?

No suggestions?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 40 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9710
Points: 3786

Oops

I looked at this and meant to come back when time was available. My bad, I forgot.

Let's look at likely debugging issues:

First, there are 23 scripts. Your Google analytics, ok. As near as I can tell, the rest are unnecessary rubbish. I have no desire to dig through to figure out what each does. In any case they are not all used in the page in question. Only link the used scripts. Unless you absolutely need web fonts (ooh,shiny), don't go there at all. SEO plugins are rubbish. Lose that that plugin. Likewise, I think I saw a script for the responsive menu. Silly. That's what CSS is for. Your calendar script should be called on the event calendar page.

Second, are the 12 stylesheets with severe redundancy. Perhaps there are a number of conflicts. You should only have one or two. They are a debugging nightmare as they are. The so-called reset is rubbish. See Global Resets Considered Harmful. Lose that stylesheet. Combine the rest, eliminating the conflict and organizing by context.

You have 1100+ kB to deliver 848 words of text plus 460kB of 14 images. Have you tried resizing the images to web size?

I suspect, and again I'm not going to dig through the jQuery/javascript, that duplicate menus are generated. Silly. Do it with one menu and style it without scripting involved. See Mobile "hidden" Menu without JavaScript.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Pauhana
Pauhana's picture
Offline
newbie
Last seen: 36 weeks 4 days ago
Timezone: GMT-8
Joined: 2018-02-13
Posts: 4
Points: 5

Thanks for the reply,

Thanks for the reply, Gary.

I'll take some time to review each of your points, but I have to admit to being a bit confused over your figures. For instance, for the theme I use, there are two css files: style.css and menu.css. If you're looking at css files across the board (in the various plugins, etc), there are a ton of those (many more than just 23), but I don't mess with them unless I run into issues and have no choice.

Your comment regarding the css reset misses the main point of those, namely setting native styles to work the same way across all browsers. If you set everything up front, you remove one variable from the debugging equation. So sorry, but I'm inclined to agree with Meyer et. al.

And why do you want folks to avoid using menus that have associated js code? I'm thinking of making use of the smartmenus stuff; it looks to be solid, but of course that system makes use of jquery to normalize and enhance menu functionality. Not sure why you'd consider that a bad thing.

Anyway, I realize that my content has yet to be cleaned up or optimized for performance, but I was hoping to get suggestions on specific responsive menu systems that folks have made successful use of. That was at the heart of my question.

I appreciate your taking the time to respond...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 11 hours 40 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9710
Points: 3786

Pauhana wrote: Thanks for the

Pauhana wrote:

Thanks for the reply, Gary.

I'll take some time to review each of your points, but I have to admit to being a bit confused over your figures. For instance, for the theme I use, there are two css files: style.css and menu.css. If you're looking at css files across the board (in the various plugins, etc), there are a ton of those (many more than just 23), but I don't mess with them unless I run into issues and have no choice.

The figures I used were the scripts and stylesheets called by the home page.

Quote:

Your comment regarding the css reset misses the main point of those, namely setting native styles to work the same way across all browsers. If you set everything up front, you remove one variable from the debugging equation. So sorry, but I'm inclined to agree with Meyer et. al.

So show me the differences among browsers. IE and Opera long ago had some different defaults from Mozilla Firefox and Chrome, but changed those diffs to match Chrome and Firefox. There are some things you might want to boilerplate and I mentioned them in my ref'd post. If you want different values, put them in your stylesheet, but don't zero everything out and have to go back and refill the values. Meyer's and follow on versions are silly make-work.

Quote:

And why do you want folks to avoid using menus that have associated js code? I'm thinking of making use of the smartmenus stuff; it looks to be solid, but of course that system makes use of jquery to normalize and enhance menu functionality. Not sure why you'd consider that a bad thing.

So many of those supposed responsive menu scripts actually write the menus, which means if the browser or its accessibility adjuncts don't support js, the menus are dead. Screen readers, aural apps and Braille readers for example would never "see" the menus. Nor would plain text browsers. If you write and mark up the menus properly, you don't need js and stuff that doesn't support CSS will see the menu.

Don't forget that js is power hungry. It will suck a battery dry in short order. Lots of folks who use mobile devices many hours of the day disable js unless absolutely needed.

Quote:

Anyway, I realize that my content has yet to be cleaned up or optimized for performance, but I was hoping to get suggestions on specific responsive menu systems that folks have made successful use of. That was at the heart of my question.

I linked an article on js-free mobile menus and talked about excess redundancy.

Quote:

I appreciate your taking the time to respond...

You're welcome.

gary

addendum: There are many old hacks, usually aimed at legacy IE because of its nonsense, and still in use. They're not needed nor helpful, but used because … just because copy/paste and who knows why. Much if not most of Meyer's reset falls in this area. Really? Zeroing borders, margins and padding on inline elements, which have none in any browser?

Others may be dealing with other legacy IE bugs. Consider the hasLayout related bugs. ~g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.