Full Width Slide In Menu

Question

When using the trigger for slide in side panel for some additional navigation, was wondering if there was a way to make the menu go full width. In the sample here: http://code.minus302.com when you click the gear, the orange side menu slides in from the right. I wasn't sure which menu to use there. I'd love those menu items to be left justified and lines that separate them go the full width. Is there a way to tweak the standard menu class to make that happen, or is there a menu already that I c…

SemiColonWeb · Accepted Answer

Hello,

Unfortunately, the Primary Menu (#primary-menu) is currently not supported inside the #side-panel. Additionally, you cannot use Duplicate #primary-menu on a Single Page. Consider using the .nav-tree Element found inside the side-panel.html Template.

Then you can use the following CSS Code to add Full Width borders to the Menu Items:

#side-panel .nav-tree {
	margin-left: -40px;
	margin-right: -40px;
}

#side-panel .nav-tree > ul > li {
	padding-left: 40px;
	padding-right: 40px;
	border-top: 1px solid rgba(255,255,255,0.1);
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

jpme226 · Answer

One more thing on this. I noticed that when displayed on mobile, the menu items in the push in panel are not visible. Any thoughts on how to remedy that?