Auto expand menubar on mobile devices

Need help? Please give a detailed explanation of your problem.
Post Reply
Dave3076
Posts: 2
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Mon Feb 27, 2017 10:28 pm
Website: www.jazzyfitclub.com

Auto expand menubar on mobile devices

Post by Dave3076 »

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.
User avatar
Benjaminh326
AllPro Provider
AllPro Provider
Posts: 29
Joined: Wed May 08, 2019 10:35 am
Website: www.allprowebtools.com

Re: Auto expand menubar on mobile devices

Post by Benjaminh326 »

Hello,

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;
	}
}
This will cause all items in your dropdown menu items (including the sub-menu items) to always display only on mobile.
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 117
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: Auto expand menubar on mobile devices

Post by NoahBaldwin »

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;
	}
}
User avatar
Dave
Support Team
Support Team
Posts: 1221
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: Auto expand menubar on mobile devices

Post by Dave »

You can find working examples of this configuration on these websites:

https://www.crconversations.com/
https://www.marciawashburn.com/
Lrosado3487
AllPro Expert
AllPro Expert
Posts: 3
Joined: Thu Jul 02, 2020 11:21 am
Website: www.socialreachagency.com

Re: Auto expand menubar on mobile devices

Post by Lrosado3487 »

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"
Lrosado3487
AllPro Expert
AllPro Expert
Posts: 3
Joined: Thu Jul 02, 2020 11:21 am
Website: www.socialreachagency.com

Re: Auto expand menubar on mobile devices

Post by Lrosado3487 »

screenshotmenu.png
screenshotmenu.png (56.65 KiB) Viewed 3144 times
User avatar
Dave
Support Team
Support Team
Posts: 1221
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: Auto expand menubar on mobile devices

Post by Dave »

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"
Post Reply