Hi,
The thread I’ve made here: https://theme.co/apex/forum/t/mobile-menu-on-new-site-not-working/66010
seems to have already been closed. Sorry for only getting back to you about it now, but my coder has tried your suggestions and they seem to have had no effect. Again I would offer you to talk to her directly via email or similar. Then she could also provide you with access to the website so you could check it out for yourself.
The theme is up to date, as she has just confirmed to me.
Hey @spektukal,
There’s another menu effect on your site probably powered by a third-party plugin. In the screenshot below, I highlighted the scripts I suspect is causing the issue. They’re coming from a third-party plugin.
In addition, another jQuery is loaded to your page which is also not coming from our theme. That also could cause conflicts.
I’d also like to kindly ask that you test for plugin and script conflicts before posting a support question. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
Hope that helps.
My coder has tried your suggestions but the menu still seems to not be working. I’ll just paste her exact message:
“As per theme support, i have removed all the scripts that the theme support mentioned. But the mobile menu is still not working. Just for your information, I already checked all the third party plugin conflicts before asking you to contact theme support. We were just using one third party plugin and that too to remove the addition of ‘#id’ in the url for each section because the theme is not doing that by default. So now i have deactivated all third party plugins. Please ask the theme support now that one page navigation is not working in mobile and on desktop the id’s get attached to the url which should not.”
So as she’s said, I’ve just checked and the nav menu still doesn’t work on mobiles and with that plugin she mentioned disabled those hashtags show up again in the address field, whenever you click on a link in the header. And I’ve asked her to get rid of those. If you know of a way to disable them without relying on third party plugins please let me know as well.
Hey @spektukal,
I checked your site and I see there’s still a custom script added which is specifically targeting the mobile devices for one page navigation which is altering the navigation behavior on mobile devices. Please remove this file (see secure note) and see if this resolves the issue.
Hiding the hashtags is currently possible with custom development only because this is the natural behavior of the browser and our goal is to keep the scrolling feature close to what browser’s do natively.
Hope this helps!
Hi,
I’ve passed on the information to my coder and will let you know if that fixed the issue. But about the hashtags, you know that these don’t affect the behavior of the website in any way, right? On any other website if I click on a link in the header the page just scrolls down to the linked section without adding this hashtag. And it seems to me like this would be a simple thing for you to implement. Just give people the option to enable it if they want to for whatever reason. I really don’t see any though. But yeah, maybe pass that on to your development team as it seems like an absolutely simple thing to do. And like I said, no other site usually adds these hashtags, so not using them seems like a more normal or natural behavior to me.
Hi @spektukal,
We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.
Thanks!
I’ve just got another reply from my coder about this issue and I’ll paste what she said here:
“Second issue is the one page navigation issue, so i have removed the custom script that the theme support mentioned. Now there is not custom script and no third party plugin that will conflict with the theme. Still the mobile menu is not working. Also, please let them know that for one page desktop menu, it is working in Chrome browser but not in Mozilla Firefox. There is some issue with the theme. We added our custom script just to make the menu’s work the way they should and are not working in theme by default.”
She also mentioned before this that she was using a custom child theme instead of the one that came with the X Theme. Could that have been causing some issues? I’ve provided here with the proper one now. But the way she makes it sound there seem to be some issues with the theme and compatibility. Which I find hard to believe since this theme’s been around for a while and at this point, as she said there shouldn’t be anything else interfering anymore. But I’ve just checked and the nav menu on mobiles is still not working. So please let me know what else could be the issue.
And here’s another reply I got from my coder:
“Yes i have removed all my custom code / scripts. And no third party plugins are active other than the Contact Form 7 and Layer Slider, which this theme is compatible with. Wordpress is up to date. The theme is also up - to - date. And i have installed the child theme also.”
So basically there should be nothing left that could interfere with the theme’s proper functioning. How come that these issues still persist then? And as she mentioned the menu doesn’t work on the Firefox browser either. That’s what the custom code you found was apparently for.
Anyways, the project has pretty much come to a halt now so I’d appreciate any insight you could provide on this matter. There’s also another issue that has caused all the content on the page to be displayed at max width and my coder doesn’t seem to know what’s caused it. But I don’t know if it’s related and she prefers to handle this issue with the menus first.
Hey @spektukal,
Before anything else, please note that our theme’s One Page Navigation feature works both in desktop and mobile.
I see that your coder removed the JS now so the next thing to look at is our child theme. Please switch to the parent theme and check if the issue persists.
If it does, please give us WordPress Admin and FTP access in a Secure Note so we could check further.
Let’s resolve the one page menu first before proceeding with other issues. And by the way, please open a separate thread for each issue as mixing topics in one thread would be confusion for us and the result would be slow response time which is not good for you and the rest of our customers.
Thanks.
Hi,
As my coder has told me she’s been using the parent theme the whole time. She only asked me for the child theme maybe 2 days ago to check if that might have something to do with the issues. So as she says the issues seems to lie with the theme. But let me know what you find out.
And it seems that I can only add secure details after I’ve already made a post? Anyways, I’ll add them that way.
Hi @spektukal,
It’s because your customization is added on the parent theme and not on the child theme. And if that customization fails, then the parent theme too. I have installed a new copy of X theme (non-modified) and the mobile menu works and scrolls fine on mobile and that confirms your parent theme is highly customized.
I went ahead and restore your modified parent theme, you can install a fresh copy after backing up the customization done on the parent theme.
Thanks!
So to clarify, what customizations exactly are you speaking of? Custom code? Or just the normal modifications to the site’s design, which you’d normally apply to the child theme? Was the issue caused by that or were there actually other modifications my coder didn’t mention?
Hi @spektukal,
Your parent theme is modified (yes, custom code), we can’t pinpoint which of those modifications cause the issue though. You need to remove those modifications one by one to see which modification is causing it.
Regardless of which modification causing the issue, the parent theme should not have been modified, you should have set up a child theme and do all your modification there. Please see the following links.
What is a Child Theme
How To Setup Child Themes
Customizations - Best Practices
Thanks,
Yes, I am actually aware that you should always use a child theme to make any modifications. But as it turns out my coder didn’t know this and I’ve even specifically told her to use as little custom code as possible on the site. Thanks for pointing these things out to me. Now I’ll have to wait until Monday to see what my coder has to say to all of that.
Let us know how it goes,
Cheers!
Hi friech,
My coder just replied and she still says that she’s only used that one line of custom code that she mentioned before. Could you explain in more detail what other custom code you’ve seen applied to the parent theme and what it’s supposed to do? I assume it wasn’t just created by the theme as part of the normal modifications to the site, was it?
Aside from that my coder will follow the instructions you’ve given and I will let you know if that finally solved all the problems.
Cheers,
Andreas
She’s set up the parent and child theme and the menu seems to be working now. But as she said the nav menu on mobiles doesn’t close automatically after you click on a link. Which as she says should be the normal function. How can you do this without using custom code?
And another thing she asked about is how to hide part of the site behind the header on the mobile version. Because as it is now the site always jumps a bit when you start scrolling down and I’ve asked her to change that. So now she asked me to ask you if there’s a way to do that without using custom code.
Hi @spektukal,
It’s intentional feature, and to achieve that, you still need to add custom code. What;'s not just recommended is adding the customization to the parent theme. Please add this to Theme Options > JS
jQuery(document).on('touchend', '.x-navbar .mobile .x-nav li>a', function() {
jQuery('#x-btn-navbar').trigger('click');
} );
With small as that, I don’t think it needs to be added to the child theme.
As for the second one, it would still need customization and it’s something complex. It’s because fixed header (or floating header) is basically disabled for mobile. You only allow it to happen through custom CSS
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed !important;
}
It can’t be done by just one custom CSS, the CSS only made it float, but the scroll positioning is basically off on mobile. That would be javascript related customization, and since javascript is not the same as CSS that can be overriden, then it will load to more issues like jumping since multipl scripts are executed at the same time.
That feature is off and intentional on mobile since menus could get longer since it’s vertical. And there are devices that are smaller, imagine you’re trying to click the last menu item but it is outside the viewport of a mobile (menu height is larger than the screen when opened) and you can’t reach it since it floats and follows as you scroll.
And when there is scrolling, the entire header height is calculated, that’s why it has a big offset when scrolled. The mobile header is too tall when expands.
If you continue with this, there will be issues that you’ll have to fix. Issues that are prevented from turning it off for mobile. And unfortunately, we can’t cover or provide support to any customization if it contributes more issues. I recommend letting it as it is for mobile.
Thanks!
I’m not sure I understand why this would be such a problem. It already is jumping when you scroll down a bit, because instead of just scrolling down normally the top of the page suddenly gets hidden behind the header. That is the issue I was hoping to fix. Whether it’s through adding some empty space behind the header or some other means doesn’t really matter to me. Whatever works best for it would be what I’d choose.
And what do you mean the header is too tall when it expands? When does it expand? When at the top? I think the difference was miniscule but if that change in size is causing the issue, then we could change that. Is that the cause of it though? A solution for this would be nice.
Also could you please explain what other custom code you’ve seen in the parent theme, as I’ve already mentioned in my second to last reply? My coder says that she’s only used that one line of code but you said that there was plenty more, so please elaborate what that code is and what it does, or what you meant by it.
Cheers,
Andreas
Hi Andreas,
Sorry for this long back and forth, ok maybe your coder added only one line of code, but still the fact remains it conflicted with the theme.
When you toggle the mobile menu button the menu panel covers whole content, right? That’s one reason why a fixed header on mobile is disabled. The jumping issue that we see on mobile now is caused by the customization that force the mobile menu to be fixed:
This custom CSS
@media only screen and (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed !important;
}
.x-section {
padding: 40px 0px !important;
}
#praxis {
padding-bottom: 70px !important;
}
}
I suggest removing all customizations done on the header and let it behave natively.
Thanks,