How can i change the width at which the Mobile Menu triggers?

Hi athemes Support Team,

I have a small problem with my main menu caused simply by having too many 1st level links in my Menu forcing them to be displayed on two lines.

To work around this problem, i would like to increase the screen width setting at which the mobile menu kicks in.

How should i go about this?


While i am here i have another important question:

All of my 1st level menu points that have dropdown are themselves not linked. Is it possible to alter the Mobile menu so that the dropdown works when you click on the text and not just on the arrow on the right. Ideally, it would resemble the non-mobile menu dropdowns, where the whole button is linked.

I am sure you will agree, that it is quite misleading for users when they see the link icon (the pointing hand) when hovering over the menu texts but when they click nothing happens. Many Users will think, that the link is dead.

I am afraid i cannot supply a link to the website as it is password protected until we are finished, and i do not have the authority to remove the password protection.

Thanks in advance for any support you can offer

Hello there,

To enlarge the menu container, add this CSS code to Appearance > Customize > Additional CSS from your site dashboard.


@media only screen and (min-width:1025px) {

  .site-header .col-md-4 {
    width: 25%;
  }

  .site-header .col-md-8 {
    width: 75%;
  }

}

If it isn’t enough, perhaps you’ll need to enlarge the header area container as well which can be done by adding this code:


.site-header .container {
  width: 100% !important;
}

> Is it possible to alter the Mobile menu so that the dropdown works when you click on the text and not just on the arrow on the right.

To achieve this, try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
;(function($) {

   'use strict'
   
  if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {

      var $parentMenu = $('.mainnav .menu-item-has-children > a');

      $parentMenu.click(function(e){

        $(this).next().next('.sub-menu').slideToggle(300);
        $(this).next('.btn-submenu').toggleClass('active');

        return false;

      });

  }

})(jQuery);


  1. Update

Regards,
Kharis

Thanks Kharis - solved perfectly!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

I have a similar (opposite) request, I’d like to know how to DECREASE the width at which mobile menu triggers. I only have a few menu items, but right now the mobile menu triggers at 1366px with the latest update and it doesn’t look good. The hamburger menu pretty much shows up on desktop size screen. I tried using the above CSS and just adjusting the px amount, but it didn’t work.

Please advise.

Thank you

Hello there,

Please refer to this discussion:

https://wordpress.org/support/topic/menu-gone-with-update/

where our lead developer spoke about it.

Regards,
Kharis

Thank you for reverting the menu width breakpoint. Like mentioned in the
other thread, ideally this would be an configuration in the theme settings
so that we can choose our own breakpoint.