Mobile menu breakpoint

Hi, how can I trigger the mobile menu breakpoint to kick in from 1200 pixels?

My website: www.elpablocs.be

Regards
Pablo :wink:

Hello there,

To accomplish it, 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($) {

      $(window).on('load resize', function() {

        if ( matchMedia( 'only screen and (min-width: 1025px) and (max-width: 1201px)' ).matches ) {

          $('#mainnav').attr('id', 'mainnav2').removeAttr('style');

        }

      });

      var	menuType = 'desktop';

      $(window).on('load resize', function() {
        var currMenuType = 'desktop';

        if ( matchMedia( 'only screen and (max-width: 1200px)' ).matches ) {
          currMenuType = 'mobile';
        }

        if ( currMenuType !== menuType ) {
          menuType = currMenuType;

          if ( currMenuType === 'mobile' ) {
            var $mobileMenu = $('#mainnav2').attr('id', 'mainnav-mobi').hide();
            var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');

            $('#header').find('.header-wrap').after($mobileMenu);
            hasChildMenu.children('ul').hide();
            hasChildMenu.children('a').after('<span class="btn-submenu"></span>');
            $('.btn-menu').removeClass('active');
          } else {
            var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');

            $desktopMenu.find('.submenu').removeAttr('style');
            $('#header').find('.col-md-10').append($desktopMenu);
            $('.btn-submenu').remove();
          }
        }
      });

      $('.btn-menu').on('click', function() {
        $('#mainnav-mobi').slideToggle(300);
        $(this).toggleClass('active');
      });

      $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
        $(this).toggleClass('active').next('ul').slideToggle(300);
        e.stopImmediatePropagation()
      });

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    /* Change mobile menu breakpoint */
     #mainnav2 .sub-menu li:hover>a,#mainnav2 ul li ul:after{
        background-color:#d65050
    }
    #mainnav2 ul ul li,.site-header.float-header #mainnav2{
        padding:0
    }
    #mainnav2 ul li a:hover,#mainnav2>ul>li>a.active,#mainnav2>ul>li>a:hover{
        color:#d65050
    }
    #mainnav2 ul li,#mainnav2 ul li a{
        position:relative
    }
    #mainnav2 .sub-menu li:before,#mainnav2-mobi ul li::before{
        content:''
    }
    .site-header.float-header #mainnav2>ul>li>a{
        height:70px;
        line-height:70px
    }
    #mainnav2 ul li ul:after{
        transition:all .3s ease;
        -webkit-transition:all .3s ease;
        content:"";
        position:absolute;
        left:0;
        width:100%;
        height:1px
    }
    #mainnav2{
        display:block;
        float:right;
        -webkit-transition:all .3s linear;
        -moz-transition:all .3s linear;
        -ms-transition:all .3s linear;
        -o-transition:all .3s linear;
        transition:all .3s linear
    }
    #mainnav2 li:hover>ul,#mainnav2 ul li ul{
        -webkit-transition:all .3s ease;
        -moz-transition:all .3s ease;
        -ms-transition:all .3s ease;
        -o-transition:all .3s ease
    }
    #mainnav2 ul{
        list-style:none;
        margin:0;
        padding:0
    }
    #mainnav2 li{
        float:left;
        padding:0 14px
    }
    #mainnav2 ul li a{
        display:block;
        font-size:14px;
        font-family:Raleway,sans-serif;
        color:#fff;
        font-weight:500;
        text-decoration:none;
        outline:0;
        float:left
    }
    #mainnav2 ul ul a{
        width:180px;
        font-family:"Source Sans Pro",sans-serif!important
    }
    #mainnav2>ul>li:last-child{
        padding-right:0
    }
    #mainnav2 ul li ul{
        width:180px;
        position:absolute;
        top:100%;
        left:initial;
        opacity:0;
        visibility:hidden;
        -webkit-border-radius:0 0 2px 2px;
        -moz-border-radius:0 0 2px 2px;
        -o-border-radius:0 0 2px 2px;
        border-radius:0 0 2px 2px;
        transition:all .3s ease
    }
    #mainnav2 ul li ul ul,#mainnav2 ul li ul ul:after{
        top:0
    }
    #mainnav2 ul li ul li ul{
        left:100%
    }
    #mainnav2 li:hover>ul{
        opacity:1;
        padding-top:10px;
        visibility:visible;
        left:auto;
        display:block!important;
        transition:all .3s ease
    }
    #mainnav2 li:hover>ul ul{
        padding-top:0;
        left:100%
    }
    #mainnav2 .sub-menu{
        z-index:99999
    }
    #mainnav2 .sub-menu li a{
        color:#fff;
        display:block;
        line-height:30px;
        background:#1c1c1c;
        padding:0 18px;
        border-top:1px solid #252525;
        -webkit-transition:all .3s ease;
        -moz-transition:all .3s ease;
        -ms-transition:all .3s ease;
        -o-transition:all .3s ease;
        transition:all .3s ease
    }
    #mainnav2 .sub-menu li:hover>a{
        color:#fff
    }
    #mainnav2 li:hover>.sub-menu>li>a{
        padding:8px 18px
    }
    #mainnav2 ul li::before{
        font-family:Fontawesome;
        color:#fff;
        float:left;
        margin:5px 5px 0 0;
        font-size:14px;
        line-height:1;
        font-weight:400
    }
    #mainnav2 .sub-menu li:before{
        margin:0;
        transition:all .3s ease;
        -webkit-transition:all .3s ease
    }
    #mainnav2-mobi ul li a{
        float:none
    }
    @media only screen and (max-width:1399px){
        .site-header #mainnav2 ul li ul{
            right:14px
        }
        .site-header #mainnav2 ul li ul li ul{
            left:-100%
        }
    }
    @media only screen and (min-width:1024px){
        .site-header{
            position:absolute;
            background-color:transparent
        }
    }
    @media only screen and (max-width: 1200px) {
      .btn-menu {
        display: block !important;
      }
    }
    /* Change mobile menu breakpoint ends */

Clear any applied cache before reloading your site, otherwise the new code addition wouldn’t take any effect.

Regards,
Kharis

Hello Kharis,

this doesn’t seem to work: http://prntscr.com/jfo05l

On smaller screen sizes: http://prntscr.com/jfo0je + http://prntscr.com/jfo0sg

In the meantime, I will comment out the code…

Kind regards,
Pieter

Hello Pieter,

Please re-enable the code to allow me troubleshooting directly from here with my desktop web browser.

Regards,
Kharis