Nav Blocks and issues on Mobile

SmugSam

Howdy,

I know this sounds similar to some other questions here, but I promise I have read through and my questions are not covered!

I have my site up and running (smcdowell.smugmug.com) and whilst it displays properly on a normal screen, the Nav blocks become an issue on smaller screens. I have read some of the tips here around targeting elements based on screen size through some CSS, but I could do with some help!

• I use two different Nav blocks on the left sidebar - one is sitewide (with elements I want to repeat like the title, About and Contact links), and the other is to provide page specific navigation (with more prominent links)
• On smartphones etc these two different nav menus get combined and ordered alphabetically i.e. it blows away the heirarchy/design I was trying to implement
• If I choose to "Collapse for mobile devices" then I just get 2 black "Menu" boxes. Not pretty.

The questions I would love input on are:

• Perhaps there is a better way to achieve what I am trying to achieve than the way I have approached it so far?
• Assuming I try and fix this with CSS, I assume I would need to create another Nav area (one that displays better on mobile), then display/hide the appropriate nav area depending on screen size?
• To do this, how do I know how to reference the different 'elements' via CSS i.e. how to call the 'desktop' nav block vs the 'mobile' nav block to display/hide each menu once screen size has been determined?

Any thoughts gratefully received!

Sam