How to force responsive menu in ipad in landscape mode

Support
#1

Hi have a number of client who insist on having long names to the top level navigation. This is causing an issue when their sites are viewed on an ipad in landscape mode. Their menu sits below their logo thus moving the menu further down the screen.

I have reduce the menu size and spacing down but it is becoming harder to read, see example here:

Is there a way of instructing the mobile 3 bar icon when the sites are viewed in landscape mode?

#2

Hey @dmacoxford,

Regretfully, there is no option for that in X. It is possible in Pro and it’s best that you convert to Pro to make use of the Navigation Collapsed or Navigation Layered for better mobile navigation user experience. On top of that, using those, you have the option to select sub anchor link behavior.

We understand that your client wants to have lots of menu items in the header. But, that is not a best practice in design. Often times, clients does not understand that so it needs to be explained.

I’ll give you a snippet to override the mobile menu breakpoint. But, please note that this is beyond the scope of our support. Using this, you accept the responsibility of maintaining this code and/or enhancing it. Add the code below to Theme Options > CSS. Change 1200 to your preferred value.

/* Override Mobile Nav Breakpoint in X */
@media (max-width: 1200px) {
    .x-nav-wrap.desktop {
        display: none
    }
    .x-nav-wrap.mobile {
        display: block
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .masthead-inline .x-btn-navbar {
        display: block;
        float: right
    }
    .masthead-stacked .x-btn-navbar {
        display: inline-block
    }
    .x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto
    }
}

Hope that helps and thank you for understanding.

#3

I assume there are many more advantages. BUT Is any of the the present coding site structure altered if we sign up for the pro version. It says in my panel that we can upgrade for free fro a number of my sites and that one of the sites would be a further $30. If I upgrade would this part be updated as normal?

#4

Not much. You will just need to rebuild your header with the Pro Header Builder. But, don’t worry. We can help you with that. Just take a screenshot of your header now for reference and we can instruct you on how to build it back up. In fact, I’ll be updating this post with a replication of the X Header in Pro.

Thanks.

#5

Are the footer headers effected as well? will they need rebuilding?

#6

Sorry for the confusion. Actually, nothing will change once you switch. But, since we want a higher breakpoint for the mobile nav to show, you will need to create a header in Pro and then activate it or assign that to the pages or globally.

Thanks.

#7

Ok thanks it make sense to convert to Pro version sooner then. I would have had to time the change over with a period when I could just build the headers. But if nothing changes until instructed I will make the move across to pro later this week.

Thanks for you help and clearing thing up. Will no doubt be asking more questions as I develop the new headers.

#8

Thanks. Feel free to ask about Pro’s functionality. I’m uploading a quick walk-through video to help you get started. Please stay tuned.

#9

Here’s a walk-through screencast to quickly show the setup. And for complete details, please see the Pro tutorials in our Knowledge Base

Thanks.

#10

Hi Christian, Managed to get a version working for me but there is an issue with the top level navigation when the site is viewed using the Navigation Collapsed view. The links form the drop-downs are working but the top level items are not.

These links are not active, have I missed a setting anywhere?

#11

Hey There,

Thanks for updating in!

To resolve your issue, please make sure that the “Subemenu Trigger” is set as Sub indicator and not as anchor because that is the default setting.

If you need anything else we can help you with, don’t hesitate to open another thread.

#12

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