How can I change the menubar on mobile devices when there is a submenu so that the submenu automatically is displayed?
Right now, if I click on the submenu title - it breifly displays the submenu navigation and then reloads the page.
Auto expand menubar on mobile devices
-
- Joined: Mon Feb 27, 2017 10:28 pm
- Website: www.jazzyfitclub.com
-
- AllPro Provider
- Website: www.allprowebtools.com
Re: Auto expand menubar on mobile devices
Hello,
In order to accomplish this, add this CSS code to your page:This will cause all items in your dropdown menu items (including the sub-menu items) to always display only on mobile.Code: Select all
@media screen and (max-width: 768px) .dropdown-menu { position: relative; } .nav li .dropdown-menu { display: block; } }
- AllPro Provider
-
- Support Team
- Website: www.allprowebtools.com
Re: Auto expand menubar on mobile devices
In some cases, you may require additional CSS to ensure the menubar items align correctly in a column. In this case, try this alternative solution:
Code: Select all
@media screen and (max-width: 768px) .dropdown-menu { position: relative; top: 0; left: 0; float: none; } .nav li .dropdown-menu { display: block; } }
- Support Team
-
- Support Team
- Website: www.allprowebtools.com
- Contact:
Re: Auto expand menubar on mobile devices
You can find working examples of this configuration on these websites:
https://www.crconversations.com/
https://www.marciawashburn.com/ - Support Team
-
- AllPro Expert
- Website: www.socialreachagency.com
Re: Auto expand menubar on mobile devices
I found this code to help with mobile menu so it can be clickable. so the dropdown submenus open when the parent is clicked and doesn't redirect you to the parents link.
Code: Select all
class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"
-
- AllPro Expert
- Website: www.socialreachagency.com
-
- Support Team
- Website: www.allprowebtools.com
- Contact:
Re: Auto expand menubar on mobile devices
The code that you have provided WILL automatically be there - if the parent menubar item has no content on the page and is only being used as a parent menu item. If you put content on the page, then what is actually happening when someone clicks on the parent item is that the browser is being redirected to display that page.
This works on a desktop computer because of the "hover" event that a mouse can create. When you are using a mobile device, and there is no "hover" you cannot have a "click" perform 2 actions at once. It must either redirect the browser to a new page OR show the expanded submenu.
You can also add any custom class to any specific parent page by going to the "settings" of the parent page and putting your entry where it says "Custom CSS Class Name" - Support Team