Hiding lower level Menu items on Mobile Devices (Motif Theme)

  • Unknown's avatar
    freem32 · Member ·

    I am building a Website that will have hundreds of pages, each one needs to be accessed via a menu, however they can’t all show at once in a long string, otherwise its total chaos. So… I now have a 3 level menu structure which looks great from the Desktop view, but still “shows all” in Mobile Devices. I suspect that I can set-up links from the 2nd level to 3rd level pages, however that seems clumsy and high maintenance. Is there CSS code that can work for me?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    madeincosmos · Member ·

    Hi there,

    The following code will leave out only the top-level menu elements on mobile devices:

    @media screen and (max-width: 600px) {
    .main-navigation ul.sub-menu {
        display:  none;
    }
}

    Alternatively you may want to leave the top two levels and hide only the third one. In such case, use this instead:

    @media screen and (max-width: 600px) {
    .main-navigation ul.sub-menu ul.sub-menu {
        display:  none;
    }
}
  • Unknown's avatar
    freem32 · Member ·

    Thanks! Yes, your second code worked, however now I can’t access the third level at all on Mobile view. I could set up a menu system on my second level pages, however I was trying to avoid that.

    I think I saw another post on making menus more click driven. I’ll try to find that again…

    Any other suggestions?

  • Unknown's avatar
    freem32 · Member ·

    For further clarification… I want a second level menu that is visible, but when you click on it, there’s no associated page, just a menu (the third level menu)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, to create a menu item that is not clickable but will contain submenu items, just add a Link menu item and add a # symbol in the “Link Address (URL)” field.

  • The topic ‘Hiding lower level Menu items on Mobile Devices (Motif Theme)’ is closed to new replies.