[bkchua]

Hi, is it possible to make sub items in menu collapsed by default when viewing in mobile? When I view my website with this theme in mobile now, the menu with all the sub items are fully expanded. I have a long list of sub items in several of the main items. This makes viewing the menu in mobile not so friendly. Is it possible to expand menu only when individual main item is clicked? And when the menu is collapsed, there is a ‘+’ sign indicate there is sub items in the main item.

Looking forward to your reply.

Thank you and have a great day.
bk
JOURNEY

[Theme Horse Support Team]

Hi bkchua,

To make sub items in menu collapsed by default when viewing in mobile Go to Appearance -> Theme Options -> Design Options Tab -> Custom CSS paste the following CSS code and Click on save all changes button:

@media only screen and (max-width: 767px) {
	#access ul li ul,
	#access ul li:hover ul ul,
	#access ul ul li:hover ul ul,
	#access ul ul ul li:hover ul ul,
	#access ul ul ul ul li:hover ul ul {
		display: none;
        }
}

Thank you!

[bkchua]

Hi, thank you so much for the prompt reply; I really appreciated it!

I have inserted it and it worked. The menu is collapsed by default. However, when I was testing it using a SONY Phone (did not try on iPhone), I found that the menu wasn’t working properly as expected. Website implemented at JOURNEY.

First case:
When clicked on ‘BOOK HOTEL’, the sub item in it expanded as expected. But instead of clicking on any of the sub item, I clicked on ‘FLIGHTS’ and what opened up was “RAIL EUROPE” instead. What I observed was when I wanted to click on “FLIGHTS”, the expanded “BOOK HOTEL” sub items collapsed causing the finger instead to click onto “RAIL EUROPE”, which is the next item after “FLIGHTS”.

Second case:
When I clicked on “BOOK HOTEL”, the sub item in it expanded as expected. Then I click on “CAR HIRE”. Instead of expanding the sub items in “CAR HIRE”, the “BOOK HOTEL” sub items collapsed and nothing else happened. To show the “CAR HIRE” sub items, I have to click on “CAR HIRE” to expand the sub items again.

And I have tried several other cases which did not work properly. In general, what I observed was if I clicked on an item with sub items and then I clicked on another item (on top of the original item clicked) with sub items, then the sub items in the latter expanded up normally. Example, clicked “CAR HIRE” first then clicked “BOOK HOTEL”. The menu worked properly with sub items in “CAR HIRE” expanded first and then the sub items of “BOOK HOTEL” expanded.

However, if I click on an item with sub items followed by another item (below the original item clicked) with sub items, then the menu did not work as expected.

Very sorry, I hope I am not making things confusing. Is there anyway to rectify this?

Thank you and looking forward to your reply.

Have a great day.
bk

[Theme Horse Support Team]

Hi BK,

If above code is not working properly then it needs code customization. You have to hire a developer as it is a new feature to add in the theme. You may find plugins if you Google.

Thank you!

[bkchua]

Hi, thank you for taking the time to reply. I checked using an iPhone and the menu worked properly as expected. It is only in Android I guessed. I tested using Sony T3 Android phone and encountered the above mentioned issues.

In anyway, thank you for your kind attention.

Have a great day.
bk

[Theme Horse Support Team]

You welcome bkchua

Thank you!

[Author]

Posts