simmtodd
Forum Replies Created
-
Forum: Fixing WordPress
In reply to: Twenty Twelve (child theme) : hiding sub-menus on mobile devicesThanks for the input. I started a new thread on this topic and received an answer with a solution:
http://wordpress.org/support/topic/how-to-hide-sub-menu-items-on-mobile-devices?replies=3
Thanks again!
Forum: Themes and Templates
In reply to: [Twenty Twelve] How to hide sub-menu items on mobile devicesThat works perfectly. Thanks so much for your help! Hopefully, this will be helpful to other folks too.
Forum: Fixing WordPress
In reply to: Twenty Twelve (child theme) : hiding sub-menus on mobile devicesActually, it looks like this isn’t working after all. I swear I double-checked to verify it was working before I posted this, but I must have been mistaken.
I tried a few more things in the CSS just now and couldn’t get the submenu items to be hidden on mobile devices while still displaying on desktop browsers. The section of the CSS in Twenty Twelve that deals with the mobile menu is a confusing. There doesn’t seem to be any differentiation between the main and submenu items.
It would be great if someone with more expertise could chime in here. Lance Willet actually said in the thread I linked to above that they would “share tutorials on how to hide the sub-menus with CSS”, but I couldn’t find any such tutorials based on my searches.
Forum: Fixing WordPress
In reply to: Twenty Twelve (child theme) : hiding sub-menus on mobile devicesI had this same problem. After reading a bunch of posts on this topic, I think I came up with a solution…
On the “Menus” screen in the admin panel, click “Screen Options” at the top right. Then select to show “CSS Classes”. Now, when you click the arrow on a menu item to edit its properties, you should see a field called CSS Classes.
For all the menu items you want to hide, add a class name to this field. You can just make something up, like
custom_sub_menu. Next, in your child theme, add the following to the style.css file:.custom_sub_menu { display: none; }In my case, I added this code to the default media query area (not in one of the width-specific areas toward the bottom of the theme’s CSS). The result is that the submenu items are hidden on mobile devices, while the submenu dropdown lists are still visible on desktop browsers. I’m not a CSS expert, so I can’t explain why this approach worked and yours didn’t. But hopefully this helps!
By the way, I came across a WordPress Core bug report discussion about this very issue in Twenty Twelve. It’s an interesting read: http://core.trac.wordpress.org/ticket/21678