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: 104
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: 736
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/
Post Reply