Awaiting an answer Helix Framework

Swapping between desktop and mobile menus

Asked by James Baldock 5 years ago Last activity 5 years ago

Hello,

I have a question about a Helix-based site swapping between the desktop and mobile menu.

On our site when viewed on a desktop, the full menu is displayed on one line.

If I shrink the width of the browser window though the menu drops down on to two lines.

If I continue shrinking the size of the browser window, the menu changes to a mobile (burger) menu as it is supposed to.

My question is, how can I get the menu to change to the burger menu earlier so that when the browser window width is reduced, the menu does not spread over two lines.

Thank you for your help.

Kind regards

James

22 replies

Toufiq Senior Staff

5 years ago

Hi there,

Thanks for contacting us. Sorry for the inconvenience. I woul request to you that, please check your site real time device. Like Mobile, tablet, desktop device. Cause, bootstrap support this devices.

-Thanks

James Baldock Asked this

5 years ago

Hello,

Thank you for your response. The site does work on other devices but I would like to be able to get it to work on desktops by getting the mobile menu to display sooner i.e. before the main menu splits on to two lines.

Kind regards

James

Toufiq Senior Staff

5 years ago

Please show me a screencast video about your issue. Thanks

James Baldock Asked this

5 years ago

Hidden content...

Toufiq Senior Staff

5 years ago

Please let me know the device size. Thanks

James Baldock Asked this

5 years ago

It's a 13" Macbook.

Kind regards

Toufiq Senior Staff

5 years ago

My macbook pro also 13'' & it displayed fine

https://prnt.sc/xlu7oh

James Baldock Asked this

5 years ago

Have you tried shrinking the window as per the screenshots I sent over?

Toufiq Senior Staff

5 years ago

Why should i shrinking? What is the reason for shrinking? Already i told you that, we follow the bootstrap rules.

Thanks

James Baldock Asked this

5 years ago

Because not everyone works in a full-screen window.

Have you tried this your end? Can you see the issue?

Are you able to help?

Kind regards

James

Toufiq Senior Staff

5 years ago

https://prnt.sc/xlyrxz

James Baldock Asked this

5 years ago

And when you reduce the width of the window...?

Toufiq Senior Staff

5 years ago

After seen your last message. Thanks

James Baldock Asked this

5 years ago

Sorry, I don't understand?

Toufiq Senior Staff

5 years ago

I said that, i have checked my macbook 13'' and rsizing the browser. No problem found. Thanks

James Baldock Asked this

5 years ago

Would you mind sending me a screenshot of what you see on your screen when you view the site then please? I have added a link to a screenshot which I have just taken, showing the shrunken browser window.

As you'll see, the problem is still there. I have also just tried it on another machine and a different browser, I get the same result there too.

Toufiq Senior Staff

5 years ago

Hi there,

Thanks for your feedback. Mainly your menu item quantity is high and if you want to work resizing your browser. Then resize more your browser and you will get off-canvas menu. Beside, If you don't like it, then decrease your menu item.

-Thanks

James Baldock Asked this

5 years ago

So you are having the same problem as me even though you said 'I said that, i have checked my macbook 13'' and rsizing the browser. No problem found. Thanks' ?

Removing menu items does not help either. The only way to get it to work is to remove at least two menu items which I should not need to do as the area is large enough for all of the currently published ones. It is only an issue when the window is resized - the menu does not change to the mobile version fast enough.

I'm just asking for a little honesty and some help, please.

Toufiq Senior Staff

5 years ago

There is only way is that, made the fluid your header.

https://prnt.sc/xpil82

And add this css code

.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span {
    display: inline;
    padding: 0 10px;
    font-size: 14px;
    margin: 0;
}

James Baldock Asked this

5 years ago

Thank you, I will try that now.

Kind regards

Toufiq Senior Staff

5 years ago

Thanks

James Baldock Asked this

5 years ago

Good news, it seems to be working now.

I didn't make the fluid header but added the code and moved one menu item and it's all working.

Thank you for your help.

Kind regards