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

• 

  freem32 · Member · Feb 24, 2016 at 12:51 am

  • Copy link
  • Add topic to favorites

  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, otherwise its total chaos. So… I now have a 3 level Main menu which looks great from the Desktop view, but still “shows all” in Mobile Devices. Any suggestions?

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

• 

  freem32 · Member · Feb 25, 2016 at 8:29 pm

  • Copy link

  FYI… I’ve looked at past forums and found many similar complaints… Based on those discussions, I have tried the following CSS commands:

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

  That didn’t work, so I tried:

  .sub-menu { display: none; }
  .current_page_item .sub-menu, .current_page_parent .sub-menu { display: block; }

  That didn’t work either, so I tried:

  @media only Screen and (max-width:920px){
  #wrapper #nav li ul.sub-menu, #top_nav li ul{display:none!important;}
  #wrapper #nav li:hover ul.sub-menu, #top_nav li:hover ul{display:block!important;}
  }

  No luck…