Mobile Conditional Nav

[Ziggur]

I understand that it is possible to have a specified widget appear, or not, based on screen size (i.e. for mobile or not). Is it possible to have one item on the Primary Nav do the same? Essentially I would like to add one more item to the Primary Nav that is visible only to people on mobile devices.

I am using the HTML5, Responsive, Metro Plus theme (v 2.0.0 ) on Genesis 2.0.1. Any code snippets or hints or suggestions will be appreciated.

Thanks

[Susan Nelson]

Hello!

You could give that menu item a CSS class and in the regular CSS, give it a display: none. Then in the responsive section of your CSS, give it a display: inline to make it appear.

[Ziggur]

Hi Susan - thanks for jumping in!

I've done that with other mobile-specific page content using DIVs to create custom classes for custom content. But I don't know how, or where, to create a unique, custom class for a specific menu item in the navigation. I've tried using the .menu-item-ID# in the responsive section of the CSS but that didn't seem to work. Any tips on how to give one menu item its own CSS class?

Brian

[Susan Nelson]

Hi Brian,

You can add the CSS class option to your menu items by clicking on the Screen Options tab in the upper right corner of your dashboard screen (while in the Menu screen). Here's some more info on that: http://en.support.wordpress.com/screen-options/

[Ziggur]

Hi Susan! Well it took me a while, but I got there. What follows is not for you so much as for others who, like me, may be trying to figure this out from zero.

1st: Cool tip on how to assign unique classes to menu items. So easy once you know, right?

2nd: Because I'm an amateur, not a pro, it took me a lot of trial and error and then finally reading and trial and error (but that's how we learn), to figure out that I needed to identify the parent or superset class (for lack of a better term) as well, in the CSS, for the new subclass I had created, with "." separators for each. So after giving my individual menu item a custom class name of, say, Fred, I couldn't just call ".Fred" in the style sheet, I had to call ".menu-item.Fred"

3rd: Once I got there, making it visible or invisible, based on screen size, was easy. But, I also determined that once what I was calling was a subset of the class "menu-item" that I could do the same thing with the existing, unique (WP-assigned) menu item ID#, as with the new, unique class of "Fred". So, in my case at least,

.menu-item.Fred
and
.menu-item.menu-item-123

both did the same thing, allowing me to effectively add or remove just that one menu from the primary nav, based on the screen size (making it responsive).

I wouldn't have gotten there without your help. Thanks again!

Brian

[Susan Nelson]

No problem! I'm sorry I wasn't more clear with the explanation. Glad you got it working. 🙂

[Author]

Posts