Failure to get the menues responsive. 
Author: Lasse A.
Visited 131,
Followers 1,
Shared 0
I can't get the menus to be responsive depending on the size of the screen. Either I get the hamburger version or a lengthy menu that looks terrible on a mobile phone. In the settings, I have clicked in the box responsive. I also get the problem that the page can be moved sideways in mobile mode, which means that not the entire page can be viewed without being moved around on the phone. How should I do?
Posted on the
This problem is normally caused by an object being too big to fit width wise at lesser resolutions, normally in the header or footer.
If you select each object and ensure you can see all 8 "handles" within the defined area you should be able to rectify the problem.
It could be any object - eg text box, menu, image, logo, etc. and it may not be too big, just misplaced so it partially falls outside the available area.
Author
Ok,
I'm not sure what you mean by handle, but I wish the menu would switch to the hamburger menu when it no longer fits on the width of the screen.
The full-width menu starts to look weird from 720px down.
Hello Lasse,
I would recommend resizing it as needed, for example by decreasing its width and incresing its height you can display it in two rows rather than only one.
Author
Hello,
My impression is that the menus look fine both in full-width and hamburger mode, so I’m having a hard time seeing how the issues relate to the overall width. The problem is that I can’t get the page to automatically switch between these modes based on the screen size.
Hello Lasse,
you will need to work on resizing the object as needed depending on the breakpoints: it is not automatically switched, but rather depends on how large the object has been set in Step 2 - Template ---> Template Contents for each breakpoint.
Lasse, by way of example and assuming the problem is your menu object in the header.
Step 2, template content, click on menu object. Here you can see all 8 handles of the object at desktop resolution. They all fall within the header area.
At 720 res you can see that 3 handles of the object are outside of the header area. This would lead to the type of problem you are having where the page can move sideways.
At 480 res I have resized the menu object and even on mobile the menu will be words (note all handles within header area)
Here I have resized the menu object and it is too small to accomodate the words, so now the hamburger menu will automatically appear.
If this doesn't make the solution clear to you (or the problem appears to be something else), please advise.