Change breakpoint normal to mobile menu and clickability

[Tierramitica]

Hello,

I found this code to change the width at which the site changes from normal menu to mobile menu:

> @media (max-width: 300px) {
> .masthead-stacked .x-btn-navbar {
> display: inline-block;
> }

> .x-nav-wrap.desktop {
> display: none;
> }

> .x-nav-wrap.mobile {
> display:block;
> }

> .x-nav-wrap.mobile.x-collapsed {
> display: none;
> }
> }

It seems to be working for everyone but not for me. I went through all the coding I currently have under customizer and in my style.css, but nothing works. I would really appreciate some help!

Also on the topic of the mobile menu, it is very annoying that visitors have to find the little arrows that are all the way to the right. I tried several codes to make the words clickable, but the codes do not work either, I do not understand what is going on because nothing I seem to do on these two issues seems to have any effect, whereas everything else is working fine. It might be relevant that these are custom links?
The last code I used is (I put it in Edit Global Javascript, as instructed):

jQuery(document).ready(function($){
	$('.menu-item-has-children').on('touchend click', function(e) {
		$(this).find('.sub-menu').toggleClass('in');
	});
	$('.x-sub-toggle').on('touchend click', function(e) {
		e.preventDefault();
		$(this).parents('.menu-item-has-children').find('.sub-menu').toggleClass('in');
	});
});

My website: www.tierramitica.com
Thank you very much for the help!

[ruenel]

Hello There,

By default, the breakpoint of the desktop menu is 980 pixels which means that when the screen size is less than 980, the mobile menu will display.

You only need this code if you have change the display of the desktop menu:

@media (max-width: 300px) {
  .masthead-stacked .x-btn-navbar {
    display: inline-block;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile {
    display:block;
  }

  .x-nav-wrap.mobile.x-collapsed {
    display: none;
  }
}

Hope this explain it briefly.

[Tierramitica]

Hello,

I am sorry but I do not understand. This is the same code I tried and did not work?
Also there is no answer to my second question.

Thank you for helping me out.

[ruenel]

Hello There,

1.) Your code is correct and valid. The code will only work if your screen size is less than or equal to 300 pixels. If you want something to happen when the screen is greater than 300 pixels then you need another set of code.

2.)This issue will be resolve when you update to the latest version. X 6.1.6 and Cornerstone 3.1.6 are now available in automatic updates! This release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/). Please do update to the latest version. After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.