Mobile Conditional Nav

Community Forums Forums Design Tips and Tricks Mobile Conditional Nav

This topic is: resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Susan Nelson 1 year, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #70578

    Ziggur
    Member
    Post count: 4

    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

    #70784

    Susan Nelson
    Participant
    Post count: 207

    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.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #70794

    Ziggur
    Member
    Post count: 4

    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

    #70795

    Susan Nelson
    Participant
    Post count: 207

    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/


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #70981

    Ziggur
    Member
    Post count: 4

    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

    #70983

    Susan Nelson
    Participant
    Post count: 207

    No problem! I’m sorry I wasn’t more clear with the explanation. Glad you got it working. :)


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Mobile Conditional Nav’ is closed to new replies.