Mobile menu custom link opens sub items

Hello. I created a menu where a custom link “company” is blank. Mouse hovering that “link” opens sub items just like a wanted.

The problem is mobile menu. Theme Perth created automatically mark ‘+’ after the custom link (because there is sub items there). When the ‘+’-button is clicked sub items will be open. When blank link called ‘company’ is clicked nothing happens. That’s because it’s a blank link (url is empty). Is it possible that sub items will open also when that blank link ‘company’ is clicked? And how do I change that. Thank you!

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .slicknav_nav .sub-menu,
    .slicknav_nav .sub-menu > li {
      display: block !important;
    }

    .slicknav_nav .slicknav_arrow {
      display: none;
    }  

This will resulting mobile sub menus be opened by default and removes the + sign.

Regards,
Kharis

Hello Kharis,

Thank you for your answer, but it wasn’t quite what I was looking for.

I am not looking for that sub menus are opened by default. I would like to open submenus when ‘blank’ link named ‘company’ or the whole tab is clicked. Not only when + sign is clicked.

Br,
Jesse

Hi Jesse,

Please try doing the below 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($){

      if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
        $('.main-navigation a[href="#"]').each(function(){
          var label = $(this).text();
          $(this).parent().prepend(label);
          $(this).remove();
        });
      }

    })(jQuery);
  1. Update

Regards,
Kharis

Awesome! Now it is working like a dream. Thank you Kharis, you are a life saver :slight_smile:

Br,
Jesse

You’re welcome Jesse!

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