How to set slimmenu work only small screen size?

[ghost]

Hi guys, How to set slimmenu work only small screen size? I have a problem with the effect and sub menu when use slimmenu in large screen Thank advance!

[adnantopal]

Please read the documentation. resizeWidth option is used to determine what you're asking.

[ghost]

Yes, I had read the documentation. I want this plugin generate css only for small screen device, not css for large screen, but on desktop sub <ul> tags is hide. check this image: http://prntscr.com/br3wmn It feasible? @adnantopal

[fallenturtle]

I came here with this same issue... I don't want a fancy menu for desktop, it should be static. I've resigned myself to using a technique like https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript to simply only use slimmenu when below the triggering breakpoint.

[ghost]

Hi @fallenturtle , i tried this demo here: https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript this ok, but not working with slimmenu :(

CSS:

@media (max-width: 992px) {
  body:before {
    content: "small";
  }
}
@media (min-width: 993px) {
  body:before {
    content: "large";
  }
}

JS

    // break point
    var breakpoint = {};
    breakpoint.refreshValue = function () {
        this.value = window.getComputedStyle(document.querySelector('body'), ':before').getPropertyValue('content').replace(/\"/g, '');
    };
    /**
 * Pass the number of columns to leaderboardMoveHelper() to do all the work
 */
var leaderboardMove = function() {
  if (breakpoint.value == 'small') {
    // leaderboardMoveHelper(2);
    $('.menu-box-right').topseo_menu({
            resizeWidth: '991',
            initiallyVisible: false,
            collapserTitle: '',
            animSpeed: 'fast',
            easingEffect: null,
            indentChildren: false,
            childrenIndenter: '  ',
            expandIcon: '',
            collapseIcon: ''
        });
  }else{
    // leaderboardMoveHelper(3);
    console.log('Large');
  }
}
    $(window).resize(function () {
  breakpoint.refreshValue();
  leaderboardMove();
}).resize();