Mobile button (hamburger button) not working on theme X

Support
#1

I have the latest versions of theme X (10.5.2) and Cornerstone (7.5.2).

But nothing happens when users click on the nav mobile button that appears on mobile devices. Can you help me with this issue?

FYI, I tried disabling all the plugins but the button still does not work.

#2

Hi @Gazelle40,

Thanks for reaching out.
I have checked and found a console error that might be blocking the JavaScript code from firing on the click event on the Hamburger menu. There might be some different reasons behind your issue, and I would like to suggest troubleshooting the following common issue to help us recognize the reason.

1.Theme Related Issue
2.Plugin Conflict [ Although you have done it already, please recheck it once again ]
3.Theme Update related issue
4.Child Theme Related issue
5.CSS/JS Customization
6.Disabling Cache
7.Disabling CDN

If you discover that an issue is coming from a custom code or 3rd party plugin, kindly consult with a developer or contact the plugin author. Please note that we do not provide support for custom codes and 3rd party plugins.
If none of the above helps, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

While I was trying to switch between different themes as you suggested, I noticed the hamburger menu does not work when the child theme of theme X is enabled and when I activate theme X itself, it works.

To make sure, I downloaded the child theme again from your site and used it without modifying it at all.

Is it possible that something in your child theme is blocking the feature?

#4

Hello Doug,

The X Child theme does not have any PHP, CSS, or JS files in it. You can use it to add any of your theme modifications. If you may already have added custom codes in the Child Theme, that may be causing the issue. We would love to investigate this issue further if we can log in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image

Best Regards.

#5

Thanks for your help. I will include login info in a secure note below.

#6

Hey Doug,

Upon checking the child themes under the x-child/frameworks there are PHP files coming from the parent and I don’t know which one you’ve made modifications to.

I’ve checked our x-child theme and it only contains these files:

image

and this is yours:

image
image292×1459 44.6 KB

Hope that helps.

#7

Well, I tried removing all the files under x-child > framework folder. The hamburger menu still does not work even though it’s empty. I put the files back after testing though.

#8

Hey Doug,

It is best that you create a staging site so we can troubleshoot in the staging site. We can delete files in the child themes to figure out the issue without causing any more problems in the live site.

Best Regards.

#9

Thanks for your help. I created a staging site. You can use the same login above

#10

Hello Doug,

Both the Child theme and the Parent X theme have the same Theme Options settings. The only difference is that when using the Child theme, in Appearance > Customize > Additional CSS, you added this custom CSS code:

.x-sidebar {
    height: 100vh; /* Adjust the height as needed */
    overflow-y: auto; /* Enable vertical scrolling */
}

.x-sidebar::-webkit-scrollbar {
    width: 8px; /* Adjust scrollbar width */
}

.x-navbar .desktop .sub-menu {
    background-color: #1a1a1a;
    padding: 0% 10%;
		 text-decoration: none;
}

.x-navbar .desktop .sub-menu a {
		 text-decoration: none;
}


.x-navbar {
   /* background-image: url('https://staging.empireclassic.net/wp-content/uploads/2024/04/empire-navbar.jpg'); */
	
	 background-color: #000000;

}

	.x-navbar .x-nav-wrap .x-nav > li > a {
		 text-decoration: none;
	}

.x-brand {
		display: block;
	 margin-bottom : -130px; /* Adjust as needed */
   margin-left: 0px; /* Adjust as needed */
}

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

	  .x-navbar .x-nav {
    display: none;
  }
	
	.x-brand{
	width: 100px;
}
	
	.x-btn-navbar.collapsed{ 
	color: tan;
	}
}

Removing the CSS code resolves the issue.

Please check the staging site now.

#11

Thank you!!!

#12

You are most welcome, Doug.

#13

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