Menu in monile view out of screen

Support
#1

Hi There,

I have a quite long menu thats bigger than the smartphone screen. I can scroll a little, but not till the bottom of the menu, so the last item is not accessible.

I’ll proivde a link via secure note.

Seems to be similar to the problem discussed here:

But if there was a bug in 2017, it should have been fixed in between ;-))

Best regards

Uli

#2

Hey Uli,

Our developers didn’t consider this as a bug because of the following reason:

In general, the more fractured and deep linking goes, the more users will get confused and not know where to go. As the site builder, it can feel like a good thing to break things up when in reality as a user it’s cleaner to have one destination to go to. For example, instead of an “About” link with 5 submenu links on “Our Company,” “Our Team,” “Our Process,” et cetera, try placing all of that content creatively into the “About” page. You can have sections on the page that discuss all that content, but having one destination is so much easier for a user to parse and work with. This is what we call “Information Architecture” and it’s just as important (if not more important) than the general design of the website itself.

-----------------------------------------------------------------------------------

If you wish to continue using the long menu, here are the options you can choose from.

  • Use bundled UberMenu plugin as it supports scrollable mobile menu. For more details about UberMenu, please see https://theme.co/apex/forum/t/extension-ubermenu/75
  • Upgrade to Pro and use the Navigation Collapsed or Navigation Layered element which supports scrollable mobile menu in a custom or Pro built header.
  • Not recommended but you can make the mobile nav scrollable with this override code. Please just note that we will not support this in case it will conflict with something else in the theme. We won’t enhance it either. Change the 100px part of the code to your header height.
#x-nav-wrap-mobile {
    overflow-y: scroll;
    height: calc(100vh - 100px);
}

Hope that helps.

#4

Hi Christian,

thank you for your detailed answer. I agree to you developers thoughts about menus, but I’t still the designers decision, how deep a menu should be …

Anyway: The site has been updated to pro a few month ago, but the header has not been rebuild yet. Is there a way to get the actual X-header in the header-builder? Or at least a template, that has the same look and feel as the X-header? I’don’t like to re-build the header from scratch, cause no one will pay this time …

best regards

Uli

#5

Hey Uli,

You can activate the Original (X) header by navigating to Pro > Theme Options > Header:

Click on Switch back to Original Headers to activate the X header. Hope this helps!

#6

Hi Nabeel,
that’s not what I want to do. As the X-Header does not scroll and christian_y suggest to use a pro-header instead, I’d like to have a header in the header-builder, that looks exactly as the actual x-header.
Best regards
Uli

#7

Hey Uli,

We’re sorry for the confusion. We have a header template that’s structurally similar to the original header and that is the Starter: Logo Left. It has a logo, desktop nav and mobile nav.

If you haven’t already, install the Starter Templates in Pro > Templates.

Next, open the Header Builder and create a new header using a template. Select the Starter: Logo Left.

The following screenshot shows the look of the template and it’s elements. Just change the logo, the colors and the menu and that’s it.

Hope that helps.

#8

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