Mobile Nav Menu – hiding submenus

  • Resolved darrenchu

    (@darrenchu)


    10 years, 8 months ago

    Hi Sayed,
    First off, thank you for providing a fantastic theme. Among the dozens of free themes I’ve previewed, and the many dozens more I’ve scrolled through, yours is by far the best one for my website’s objective on functionality and look and feel.

    Just had a quick question…I have a hundred and fifty or so pages, and quite a few submenus, and am looking to hide all submenus and subpages (within the mobile nav) so that a user viewing my mobile menu doesn’t see all submenus from the menu’s mouse onclick (in the same way the main navigation menu behaves currently). I’ve tried locating the CSS you use to reference the mobile nav but can only find a few bits here and there. Anyways, I was just wondering if you had plans to hide the submenus/subpages in a future release of your theme, as I’m sure most users would prefer these hidden until a mouseover or mouseclick event on some main menu item.

Viewing 5 replies - 1 through 5 (of 5 total)

  • Thanks and I m glad that you liked my work.

    If you want to hide the submenus in the small screen , this css could be a help.

    @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;}
}
    Thread Starter darrenchu

    (@darrenchu)

    It works! Thanks for the quick response Sayed!
    I tweaked the code you provided to only display the 1st level of submenus upon hover, by adding the greater than sign after the hover class..

    @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;}
    }

    Here’s a tutorial on styling menus that might be interesting for anyone who wants to better understand the above:

    https://www.wproots.com/how-to-style-wordpress-menus-dropdowns/

    Sayed Taqui where would i have to put the code in order for my site to hide the sub menus in the navi area using mobile?

    You can paste it in Apperance > Supernova Options > Styling > Write Custom CSS

    It didn’t work when i placed it in the Custom CSS

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Nav Menu – hiding submenus’ is closed to new replies.