Auto expand menubar on mobile devices

[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.

[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.

[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;
	}
}

[Dave]

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

https://www.crconversations.com/
https://www.marciawashburn.com/

[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]

screenshotmenu.png (56.65 KiB) Viewed 1113 times

[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"