properly configured responsive menu

Greetings all,

I’ve been trying to sort out responsive menus on my site:

I’ve made a lot of progress, but I’m stuck on a few issues. The first is making the responsive menu work properly. I am using the “CSS Menus” action.

Good news: I managed to get the responsive menu to function at a basic level, thus enabling my site’s appearance on my iPhone 5 in portrait to look reasonably good. I placed a hamburger icon and the menu slides in from the left as I like.

Bad news: The menu is now rather confusing. There are items that appear to be duplicated and only one of them leads anyplace. This appears to be a result of the menu displaying the folder structure of my site folder. For example:

Previously I had a menu item called “Music” which then had a drop-down of “Concert”, “Jazz” and “Lessons”. Each of these drop-downs would lead directly to a page that would list many specific examples of my music. Now, the menu reflects the site folder folder structure, thus “Concert” leads to another drop-down leading directly to the page where the examples of my music are listed.

It’s worse on the responsive menus for phone and tablet. There when the hamburger icon is tapped, the pop out menu shows “Music” (this is a folder in the site folder) which leads nowhere, “Concert” (also a folder) likewise, and only the indented “Music-Concert” (which is a page) is a genuine link. This is obviously very confusing to the visitor.

So, many question is in general, how to make my CSS Menus work properly when I have drop-down menus. And more specifically, I think that I could make this work if I could also hide folders the way I can hide a page with the “Remove from CSS Menu” action applied to the page.

I’m also open to any other solution experienced users can suggest.



Chris Rutkowski
Creative Director, Luna Media

freewaytalk mailing list
Update your subscriptions at: