Hide Sub-Menu Items on Mobile

  • Resolved andrewkropff

    (@andrewkropff)


    9 years, 11 months ago

    I have organized my menu items great on desktop, but in mobile mode the number of sub-menu items is out of control.

    I’ve tried the following code in a custom CSS area, but it doesn’t work:

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

    Here is my site for reference

    Any thoughts?

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

  • Try 480px

    Try this instead

    @media screen and (max-width: 480px) {
	#navigation ul ul li:last-child a {
		display: none;
	}
}

    Thread Starter andrewkropff

    (@andrewkropff)

    That worked great! It is now hiding the third-level sub menu items.

    What if I wanted even the second level items hidden? With this theme it isn’t very well communicated what is a parent item and what is a child.

    Should I hide the children items or should I work on the design of #navigation ul ul li a to make the children more prominent?

    Thanks for the help!

    Try just doing this code once:

    @media screen and (max-width: 480px) {
	#navigation > ul > li:last-child {
		display: none;
	}
}

    Replace the other code I gave

    Thread Starter andrewkropff

    (@andrewkropff)

    I put this in after I psoted my last message.

    #navigation ul ul a, #navigation ul ul a:link, #navigation ul ul a:visited {
	margin-left: 20px;
}

    I think this is a good compromise, as it still lists a few children items but makes it clear they are children.

    Thanks for your help Erik!

    Bob

    (@toggerybob)

    SO glad I found this topic. Still not working for me using theme: https://themeforest.net/item/event-responsive-parallax-events-theme/7823556
    I’ve tried to add to child css and custom css in theme.
    Any ideas as to why it won’t work for this?
    Thanks so much! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Hide Sub-Menu Items on Mobile’ is closed to new replies.