Submenu Links/Text Cut Off

Although the submenu looks perfect on my own iPhone - no issues whatsoever… in the builder mobile view, it’s wrong and runs off the right side of the screen; however, someone with an android and someone else with an iphone sent me screenshots where the menu drops left and gets cut off on the left side of the screen.
I’m not sure how to correct this, especially since the builder is showing the opposite to what customers are seeing lol. I would love some help please :slight_smile:

Thank you so much,
Tina

Hello Tina,

Thanks for writing to us.

I checked your given site URL on my iPhone. It seems that the menu is working fine at my end. It might be a browser cache issue at your end. I would suggest you clear the browser cache and then check it again.

Please have a look at the screenshot in the secure note.

Thanks

Hi @prakash_s,
It’s always been perfect on my phone :slight_smile: But 2 different people, whom I’ve never met before, in different countries than me, each sent me screenshots of the dropdown menus being cut off on their phones. I’m not really sure where to go from here since it looks great on my phone. In the mobile viewer (in the builder), it’s cut off, but the opposite site to what people have showed me. I’m a little confused lol. I’d like it to work on all phones, otherwise it looks bad on me. Are there any fail-safe solutions to guarantee it won’t be cut off?
Thank you so much,
Tina
(mobile screenshot on left from someone’s phone / Pro builder on right)

Hello Tina,

Please be advised that the Navigation Inline and Navigation Dropdown are best to use on desktop and larger screens. For smaller screens, it is best that you use navigation collapsed, navigation layered, or the navigation off-canvas element. You can always have both elements and then show/hide the element in specific screen size. You can do all that by utilizing the “Hide During Breakpoints” options in each of the navigation element settings. Please check this out:

Hope this helps.

1 Like

Ok, I will take a look. Thank you so much for your help! :relaxed:

Hi Tina,

Glad that we are able to help you. Please let us know how it works for you.

Thanks

[quote=“ruenel, post:4, topic:87990”]
navigation collapsed, navigation layered, or the navigation off-canvas
[/quote]

I like the navigation layered; however, there’s no toggle. I found a section in your docs about there not being a toggle for content sections… but this is a header. How can I get the toggle to show up? Thank you :slight_smile:

Hi Tina,

First off I would like to say I love Art too, but Art does not love me :sweat_smile:

I’ll explain the issue, the issue is happening to small-screen devices (e.g. iPhone 5,6,7, etc), and depending on whichever side of the screen has more room the sub-menu will pop up on that side (left or right), and because there is only a little area on small-screen devices its inevitable that the submenu dropdown will be cut off.

This is why we do not recommend using the dropdown menu as a mobile menu.

Navigation Layered element is a good choice but because of a recent update to the Dropdowns, Modals, and Off Canvas content (you can read more about that here) you need to do one extra step and that is adding the Off Canvas element first, then inside that off-canvas put the Navigation Layered. The Off Canvas element will serve as the container and the Toggle.

Hope that helps,
Cheers,

1 Like

lol yes some days art can be a bit of a fight, but the persistence is what gets the end result :wink: A little bit like web in a way haha. Thank you so much for your explanation! I’ll try adding the Off Canvas element, and all should work out. Very much appreciated! :relaxed:
T

You are most welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.