hoping you could help. So, Im using xtheme, and wordpress. And I have code to make my mobile menu a fixed top menu, so its always visible. I also have JavaScript to make it retract upon clicking a menu item so the menu doesn't cover the screen.

css to make it fixed:

@media (max-width: 979px) {
  .x-navbar-fixed-top {
    position: fixed!important;


    $('.x-navbar .mobile .x-nav >').on('click touchend', function(e) {

This works to a point, however, if you go to this page: https://foresthillcentre.com/mental-health-services/

And try the menu on all of the submenu items (setup to scroll to section on same page) The menu retracts before you can click on anything, and you have to re-click the hamburger to bring up the submenus. You will see what I mean on use...

Any suggestions to fix this?

Thank you.

  • I don't think WordPress knowledge and expertise is going to be useful to you, what you want is general Javascript/CSS/HTML expertise and you don't need to limit yourself to WordPress developers, try asking at stackoverflow
    – Tom J Nowell
    Commented Apr 6, 2022 at 16:22
  • Have you asked the XTheme developers for assistance. Start there. Commented Apr 12, 2022 at 20:27

1 Answer 1


The CSS isn't the culprit here, there is an issue with your jQuery logic. Based on the provided jQuery it looks like you're binding click events based on class names.

I would suggest binding the click event that triggers the initial navigation dropdown to the hamburger icon's ID rather than class. And then binding a separate click event that triggers the drop downs.

It also appears that both the navigation and the submenu dropdowns share the same attribute: data-x-toggleable="x-nav-wrap-mobile" this may be the cause of the issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.