Hamurger toggle-btn does not work on Phone

0
Hi, I am using the NavigationLayouts/Sidebar_Full_Responsive and have two hamburger buttons: leftSidebarToggle class=toggle-btn topSidebarToggle class=toggle-btn   While both buttons work in Responsive Desktop and Tablet Browser mode, only the leftSidebarToggle button works in Phone mode (i.e. the topSidebarToggle appears but does not toggle). Why is that? Tips appreciated
asked
6 answers
1

Does your layout look somewhat like this?

If so the toggle button should have the following classes on it. "class=hidden-sm hidden-md hidden-lg btn-bordered toggle-btn"

This makes the button hidden until it reaches an xs resolution like most mobile devices. So when the the toggle button appears it hides the fixed siderbar, which is located next to the blue content box. Outside of the mobile resolution the sidebar becomes fixed.

 

I hope this answers your question. 

answered
1

Hi Daniel & Wade,

Wade, Adding

class=hidden-sm hidden-md hidden-lg btn-bordered toggle-btn

makes the button disappear entirely acrosss Desktop, Mobile, Phone browsers.

 

Daniel, mine looks like

with both buttons as follows

and

At runtime, the button appears but does not toggle.

So I use the leftSidebarToggle button to toggle the menu off, but I can't restore it with the topSidebarToggle button. Yet it works fine in Desktop & Tablet mode.

It is mysterious...

Guislain

 

 

answered
0

Any reason you're not using the Atlas_UI_Resources.Atlas_Default layout?  Also, when you inspect the page in your browser, are you experiencing the same issue when you switch to iPhone?  Below is a screenshot from my web browser and how it's set up in my modeler.   I'm using the Atlas layout now and was able to toggle with no issue.  Hope this is helpful but if not, I'll ask a colleague of mine to chime in since this is in his wheelhouse.

answered
0

I agree Guislain.  That's pretty odd that you're not having the same issue for desktop and tablet and only mobile.  You might consider using the Atlas layout for this.  I know that's not "the answer" but it's the only thing that comes to mind.  I had issue with the toggle function a while back and could only get it to work consistently by using the Atlas layout.  Wade and I have the exact set up with class name and styling.  

I almost suggested checking your toggle mode by right clicking on the left region but I'm not sure changing anything there will fix your issue since you're not having problems in your desktop or tablet.  Are you using the same layout across the board?

 

answered
0

Hi Daniel,

I started this App from scratch with DM7.9.0 (vs WM), and the only 2 App Store modules which came OOTB, where NavigationLayouts and UI_Resources, and I followed the components used in the Mendix App Developer training examples (based on NavigationLayouts).

How would I migrate an application built on NavigationLayouts to Atlas_UI_Resources.Atlas_Default?

Thanks,

Guislain

answered
0

I am making an Angular application, and installed all my libs with Bower. When I check the console, all the sheets/scripts are loading up properly. I also have bootstrap and jQuery defined in my head. I copied the code from Bootstrap's site i continue searching on: ShowBox Mobdro Vidmate.

The issue that I'm having is that the hamburger menu never comes up. The links just stay exactly the same as when the screen is big. The other problem is that nothing in the nav-collapse collapse div shows up, even when the site is big. Seems like there is an issue with collapse, which is making both not work. Suggestions

 

answered