Docs

[lizjack15nfh]

Hello,

I have noticed an issue with the mobile view of a site we are developing updates for using X Theme. The sub menus of two primary options no longer appear to work when in a mobile size responsive view. Using Firefox developer tools I can eventually get the sub menus to display but there is no scroll ability in the navigation and some of the menu content becomes hidden off screen.

This site is very difficult to work with I’m afraid, even when I got my hands on it, the site was heavily customised and very, very outdated. With the help of your support team in the past I was able to get the X theme updated and I was now wondering if you would be able to point me in the right direction to sort this mobile menu issue.

I’ve extensively tried the X theme forums and some snippets of code that I’ve found but none have been able to solve the issue for me. From what I have read through, I have the understanding that the way the theme navigation was structured and coded has changed over a few updates. This is where I’m thinking the issue might come from as when you helped me update the theme I was jumping from a very old version (2.6.something I think).

[lizjack15nfh]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[lizjack15nfh]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
.x-navbar .x-nav ul.sub-menu.collapse.in {
    display: block !important;
}
}

Hope that helps.

[lizjack15nfh]

Hello,

Thank you for your reply.

Your code snippet does let the sub menus in the mobile view show, but the option inside that sub-menu are still hidden, plus the content runs off the bottom of the screen and you are not able to scroll down the menu.

I should be able to make the sub-menu items visible again, I remember seeing an existing custom piece of code hiding them but how do I get the mobile menu to allow users to scroll down the options?

Thank you again for your time and help.

[Rue Nel]

Hello There,

Thanks for the updates! To resolve this issue, please update your custom css code and use this instead:

header.masthead.masthead-inline {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2000;
    overflow: scroll;
    height: 100%;
}

Please let us know if this works out for you.

[lizjack15nfh]

Hello,

Thank you for you help. The code you provide worked like a charm but unfortunately covered all of the site content when the mobile menu was collapsed. This stopped any of the site content from being interacted with.

To fix this we had to set the height property of the above code to auto so at all other times the content of the website was interactive and then use some JavaScript to set the height back to 100% when the drop-down menu was revealed.

$('#mobile-toggle').click(function() {
    $('header.masthead.masthead-inline').toggleClass('height100');
  })

The above code was added to the global JavaScript in the Customize section with the id of mobile-toggle added to the tag that is used to create the mobile menu button.

I hope this is of help to anyone else that may encounter a similar issue down the line.

Thank you again for your help.

[Joao]

Hi there,

Thank very much for your input for the community and I am glad you managed to find a solution.

Let us know if you need help with anything else.

Joao

[Author]

Posts