With X 5.2.1 mobile menu is moved to the left

Support
#1

Hi,

by checking my site with a smartphone I recognized that after clicking the mobile menu button the mobile menu appears on the left side with only the right part of the menu text displayed. You can see a painted image of this at the end of this post.

I can’t image how this could happen and I hope there is someone who could help me very soon, because people with smartphones can not access the site.

Thanks in advance for your help.

Best regards

Albert

#2

I found out that the problem lies in a change which I got from a X support person a couple of weeks ago. They told me I should insert into the Customizer CSS the following:

.x-navbar-fixed-left {
top: 0px !important;
left: -230px;
}

With this change the navbar appears correctly in non-mobile view, but incorrectly, as shown, in mobile view. When you remove the left-tag or set it to 0 the navbar overlays the left part of the layout on non-mobile view (therefore the change was implemented), but it appears correctly in mobile view. So when I got this change the X support stuff did not look what happened with the mobile view, the same did I. :disappointed:

The problem now is that this change happened a couple of weeks ago. And people with smartphones could not access the site since then.

So I really need a fast solution to this. Hopefully you find it for me, because I know only a little about all this programming stuff.

Albert

#3

Unfortunately the same error appears also with X 5.2.2.

Albert

#4

Hello @albert0346,

Thanks for writing in and we’re sorry to hear that you seem to be experiencing an issue here. Regretfully, we can’t diagnose this problem without a link to your website so we can see the issue live. We appreciate you sharing the image you did, but it does not have enough context for us to properly look into this matter (especially if there is custom code involved). Once you send over a URL where we can inspect the problem for ourselves we will be happy to help you figure out what is going on with your website.

Cheers!

#5

Thanks @kory !

I didn’t want to show the address because the post is probably seen on the Internet. Then people would think what a lousy business, they are not able to give me access with my smartphone. But perhaps that’s a stupid idea.

So here is the address

I hope you can help me.

Albert

#6

No problem. We have a feature called “Secure Note” which can be used to post private info visible only to our staff. I’ve moved your URL to a secure note so it’s not public anymore.

Try replacing the custom CSS you have with this:

@media (min-width: 979px) {
.x-navbar-fixed-left {
    top: 0px !important;
    left: -230px; 
}

That will cause it to only work on the desktop view.

#7

Thanks @alexander !

I replaced the old

@media ( min-width: 980px ) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: absolute;
bottom: auto;
}
}

with your new

@media (min-width: 979px) {
.x-navbar-fixed-left {
top: 0px !important;
left: -230px;
}

But after it the whole menu disappeared on desktop view. So I used again the old CSS.

By the way: I tried to use here the blockquote for the css but it did not work. And how can I use “Secure Note”?

Albert

#8

I know a little about media queries and tried now this:

@media only screen and (max-width: 970px) {
.x-navbar-fixed-left {
left: 0px;
}
}

And it works! Only at about a screen width around 960 pixels there is the mobile menu not stretched over the whole width of the screen. But when the screen gets smaller it fills the whole screen.

This is my try to fix this with my little css knowledge. Perhaps you could give me a more professional and better solution.

At least now people can access the site menu with their smartphones.

Albert

#9

Hi There,

Please update your code from

@media only screen and (max-width: 970px) {
.x-navbar-fixed-left {
left: 0px;
}
}

to

@media only screen and (max-width: 979px) {
.x-navbar-fixed-left {
left: 0px;
}
}

Hope it helps

#10

Thanks @Joao !

Yes, now it works without this little problem. Great!

Could you please answer my question from the previous post about “Secure Note” and putting code properly on this site.

Albert

#11

Hi There,

To learn how to add a secure note, please refer to :

To format the code on the forum, once you have written or pasted your code on your message box.

On the tool box above the message box, you will find beside the blockquote the simbol </>

Select your code and press </>

Hope it helps

#12

Thanks @Joao !

In the description I found this: “In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.” But I don’t see this button at the bottom of this reply!? I added a screen capture to show it.

Albert

#13

Hello There,

Please check out your original post and you will see the icon.

Hope this helps.