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
-
- Posts: 2
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Mon Feb 27, 2017 10:28 pm
- Website: www.jazzyfitclub.com
- Benjaminh326
- AllPro Provider
- Posts: 29
- Joined: Wed May 08, 2019 10:35 am
- 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.
In order to accomplish this, add this CSS code to your page:
Code: Select all
@media screen and (max-width: 768px)
.dropdown-menu {
position: relative;
}
.nav li .dropdown-menu {
display: block;
}
}
- NoahBaldwin
- Support Team
- Posts: 117
- Joined: Fri Jan 04, 2019 11:21 am
- 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;
}
}
- Dave
- Support Team
- Posts: 1223
- Joined: Wed May 11, 2011 10:30 am
- 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/
https://www.crconversations.com/
https://www.marciawashburn.com/
-
- AllPro Expert
- Posts: 3
- Joined: Thu Jul 02, 2020 11:21 am
- 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
- Posts: 3
- Joined: Thu Jul 02, 2020 11:21 am
- Website: www.socialreachagency.com
- Dave
- Support Team
- Posts: 1223
- Joined: Wed May 11, 2011 10:30 am
- 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"
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"