WebSite X5Help Center

 
Martin R.
Martin R.
User

Hamburger menu on small devices, full menu display on desktops  en

Author: Martin R.
Visited 1051, Followers 1, Shared 0  

Hi,

In reference to this thread, which I think was the same issue... 
https://helpcenter.websitex5.com/en/post/239192

What I really want to do is have a hamburger button appear on small devices such as mobile phones and the full menu displayed on larger tablets and desktops.
Not sure if there was a resolution to this, or if it can be done.
Likewise if I add a menu to the 1366px & above resolution, does that mean the menu will automatically appear on the 480px and lower resolution devices?

If you look at my site, madebyearth.com.au on a phone, the hamburger button works really well. If you look on a desktop, there is all this space at the LHS of the screen where the full menu can be displayed, but instead I have the little green hamburger button that needs to be clicked every time to show the menu (screenshots attached)

Posted on the
5 ANSWERS - 1 USEFUL - 1 CORRECT
Martin R.
Martin R.
User
Author

Desktop screenshot

Read more
Posted on the from Martin R.
Martin R.
Martin R.
User
Author

If you look at the two screenshots you can see that the menu under my banner shows on the desktop, but as a hamburger menu on the phone screenshot.
This is what I'd like for the side product menu. Shows as a hamburger menu on the phone, but displays as a full menu automatically on the desktop with product categories listed etc

Read more
Posted on the from Martin R.
Aleksej H.
Aleksej H.
Moderator

Hello.The menu object seems to be too small to display all menu items.Try increasing the width and height of the object at the screen resolutions you need.

Read more
Posted on the from Aleksej H.
Esahc ..
Esahc ..
Moderator

Martin, as you are aware, the sidebar can be resized as required for each resolution in step 2, template stucture. In step 2 template content, assuming sufficient space is available simply size the menu object to fit the content without exceeding the visible (grey checkerboard) area.

If you only ever see the hamburger menu even if space is sufficient, open the menu object and make sure you have not clicked "always display hamburger menu" selection box

If you ever wish to discuss limitations or alternatives you will find my contact details at https://esahc.com (I am relatively local to you)

Read more
Posted on the from Esahc ..
Martin R.
Martin R.
User
Author

Esahc, your advice was fantistic.

Turned out to be a few issues.
The reason it disappeared was that the menu items I added took the height of the menu longer than the page was set to.

So it defaulted to 2 columns, and as the menu object was sized to the visible area, it then defaulted to two columns. When I extended the menu object size to exceed the visible area it appeared again, but in two coloums, even though set to only one column.

The work around for this was to lengthen the side bar height in manu structure, however it was greyed out.
So I adjusted page contents height which automatically increased the heigh of the side bar menu potential height.
Then I could go back and drag the menu to fit the visible area, leaving extra room at the bottom for new menu items when I create them.

I have reuploaded and it looks great now. No longer have to click the hamburger button to display the menu on desktops and tablets.

Thanks again.

Read more
Posted on the from Martin R.