Submenu on Mobile Options

johnzeiger
12 Posts
johnzeiger posted this 02 June 2016

I have a WordPress site that has numerous pages. On a phone, if I configure the submenu as:

1) On Click - you can't navigate to any of the parent pages...clicking a parent menu item toggles the visibility of the associated submenu

2) Expanded - clicking a parent menu item takes you to the associated page as expected...but, there are so many menu and submenu items that they don't all fit on the screen...is there a way to add a scrolling feature?

The ideal solution would be an option to just show the parent items and for ones with submenus, include a plus sign next to the menu item...and have 2 choices - click the name of the menu item to display that page or click the plus sign to make the associated submneu tems visible

I have a WordPress site that has numerous pages. On a phone, if I configure the submenu as: 1) On Click - you can't navigate to any of the parent pages...clicking a parent menu item toggles the visibility of the associated submenu 2) Expanded - clicking a parent menu item takes you to the associated page as expected...but, there are so many menu and submenu items that they don't all fit on the screen...is there a way to add a scrolling feature? The ideal solution would be an option to just show the parent items and for ones with submenus, include a plus sign next to the menu item...and have 2 choices - click the name of the menu item to display that page or click the plus sign to make the associated submneu tems visible
menu responsive submenu
Vote to pay developers attention to this features or issue.
5 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 03 June 2016

Hi,

That is not possible in Themler menu. For now you have With Reload option that loads the link of the parent item and then expand child pages. Tat will work if your parent menu items are not separators.

Sincerely,
Hella

Hi, That is not possible in Themler menu. For now you have With Reload option that loads the link of the parent item and then expand child pages. Tat will work if your parent menu items are not separators. Sincerely, Hella
johnzeiger
12 Posts
johnzeiger posted this 03 June 2016

I'm having 2 issues with the With Reload option:

1) If I select a top-level menu item that has submenu items, the page reloads as expected but the menu closes...and I have to click the menu button to reveal the submenu. Is there a way to reload the page and automatically leave the menu open?

2) If a top-level menu item has numerous submenu items, the top-level menu items below the submenu are not visible and they can't be scrolled to (see the 2 attached screenshots)...the only way to then access them is to click on a top-level item that only has a few submenu items and open the menu again

All-Menu-Items.png
Missing-Menu-Items.png

I'm having 2 issues with the With Reload option: 1) If I select a top-level menu item that has submenu items, the page reloads as expected but the menu closes...and I have to click the menu button to reveal the submenu. Is there a way to reload the page and automatically leave the menu open? 2) If a top-level menu item has numerous submenu items, the top-level menu items below the submenu are not visible and they can't be scrolled to (see the 2 attached screenshots)...the only way to then access them is to click on a top-level item that only has a few submenu items and open the menu again !All-Menu-Items.png!!Missing-Menu-Items.png!
All-Menu-Items.png
Missing-Menu-Items.png
Support Team
Support Team posted this 07 June 2016

Hello John,
1.the menu is always displayed as closed in responsive mode when page reloads. (if you do not select 'All Open' option). This is behavior by design.

2.to make the menu area scrollable fixed height should be applied to it. For example you may add following CSS under Home tab >> Settings >> Additional CSS

.navbar-collapse.collapse.in {
    height: 300px !important;
}

And you may consider using smaller menu font size in Phone mode

regards,
Aileen

Hello John, 1.the menu is always displayed as closed in responsive mode when page reloads. (if you do not select 'All Open' option). This is behavior by design. 2.to make the menu area scrollable fixed height should be applied to it. For example you may add following CSS under Home tab >> Settings >> Additional CSS .navbar-collapse.collapse.in { height: 300px !important; } And you may consider using smaller menu font size in Phone mode regards, Aileen
johnzeiger
12 Posts
johnzeiger posted this 15 June 2016

Perfect...thank you!

Perfect...thank you!
petra
73 Posts
petra posted this 29 January 2018

Hi

I had a problem where my submenu was very slim and I used the code

.navbar-collapse.collapse.in {

height: 300px !important;

}
and changed it to

.navbar-collapse.collapse.in {

width: 300px !important;

}

And it fixed my problem. Thanks

Hi I had a problem where my submenu was very slim and I used the code > .navbar-collapse.collapse.in { height: 300px !important; } and changed it to > .navbar-collapse.collapse.in { width: 300px !important; } And it fixed my problem. Thanks
You must log in or register to leave comments