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...).
Sorry, it might help to
Sorry, it might help to actually include a link to the site, no?
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?