Community Forums › Forums › Archived Forums › Design Tips and Tricks › Mobile Conditional Nav
- This topic has 5 replies, 2 voices, and was last updated 10 years, 5 months ago by Susan Nelson.
-
AuthorPosts
-
November 2, 2013 at 4:35 pm #70578ZiggurParticipant
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
November 4, 2013 at 3:54 am #70784Susan NelsonParticipantHello!
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.
November 4, 2013 at 6:20 am #70794ZiggurParticipantHi 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
November 4, 2013 at 6:46 am #70795Susan NelsonParticipantHi 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/
November 4, 2013 at 5:51 pm #70981ZiggurParticipantHi 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-123both 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
November 4, 2013 at 6:16 pm #70983Susan NelsonParticipantNo problem! I'm sorry I wasn't more clear with the explanation. Glad you got it working. 🙂
-
AuthorPosts
- The topic ‘Mobile Conditional Nav’ is closed to new replies.