Mobile menu on new site not working (still not fixed)

Support
#5

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.

#6

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!

#8

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.

#9

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.

#10

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.

#11

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.

#12

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!

#13

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?

#14

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,

#15

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.

#16

Let us know how it goes,

Cheers!

#17

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

#18

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.

#19

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!

#20

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

#21

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,

#22

Hi friech,

I’ve passed it on to her and will let you know about the results.

Cheers,
Andreas

#25

Hi,

So to clarify, as my coder just explained it to me as well, your theme is set so that the header stays at the top of the page and doesn’t move with it by default? Unlike on pretty much every other site? Why?

If that’s really the case, then do you have a simple solution to make it stick to the top of the screen? My coder said she could do it but it would be nice to avoid any further potential complications. This project has already dragged on way too long because of it.

It really makes me wonder though about some of the choices you’ve made with this theme. This isn’t the first time now that you’ve mentioned going against what every other site does, because you think it’s better that way, and not even providing an option to change it in an easy way. I’ve picked this theme in part because of its builder, hoping that I could avoid having to use lots of custom code for everything. But now it seems that’s not really avoidable with your theme after all.

#26

Hello @spektukal,

So to clarify, as my coder just explained it to me as well, your theme is set so that the header stays at the top of the page and doesn’t move with it by default? Unlike on pretty much every other site? Why?

Just like any normal site, the navbar in mobile screens stays at the top of the screen. The navbar goes along with the page as you scroll it. It does not stay fixed at the top of the browser screen by default. Making the navbar stick to the top requires custom code to do it. The design of the navbar is thought more about how most users navigate the site. In most cases, a sticky navbar will be hiding some of the contents of the page which is why we opted that the navbar will not be sticky in smaller screens. And yes, if you want to have a sticky navbar in mobile screens, a CSS code is needed which your coder has already placed and it is working now. The code added by your coder does not pose any conflicts or complications in any way.

Hope this helps.

#27

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