Top menu gets pushed down when screen is too small

I sent and notified our technical team about problem. We are checking and fixing. We will inform you as soon as possible.

Regards,
Dominic

To resolve this problem, you can log in to Dashboard > Theme > Customize > General Settings > Add the following code to the “Header Script”

<style>
#wrap-main-menu .control {
    position: absolute;
    margin-top: 5px;
    z-index: 9999;
    text-align: center;
    color: #000;
    background: #fff;
    opacity: 0;
    border-radius: 50%;
}

#wrap-main-menu .control i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;
    cursor: pointer;
}

#wrap-main-menu .control i:before {
    cursor: pointer;
}

#wrap-main-menu .control i {
   cursor: pointer;
}

#wrap-main-menu:hover .control {
    opacity: 0.5; 
}

#wrap-main-menu .next {
   right: 10px;
}

#wrap-main-menu .back {
  left: 10px;
}
</style>

And add the following code to the “DW Footer Script”

<script>
(function($) {
// fix main menu
    function fixmainmenu(){
        var ntw = $('.no-touch').width(); 
        var tw = $('.touch').width();
        var bw = $('#mashhead .brand').width();
        var cw = $('#mashhead .container').width();
        var mmiw = cw - bw - 150;
        var mmow = 0;
        var leftmm = 0;

        if(ntw > 979 || tw > 1024){
            $('#menu-main-menu > li').each(function(){
                var liw = $(this).outerWidth();
                mmow += liw;
            });

            $('#menu-main-menu')
                .css({'width': mmow, 'position': 'relative'})
                .wrap('<div class id="wrap-main-menu"><div id="wrap-main-menu-inner"></div><span class="control next"><i class="icon-chevron-right"></i></span><span class="control back"><i class="icon-chevron-left"></i></span></div>');
            $('#wrap-main-menu').css({'position' : 'relative', 'float' : 'left', 'width' : mmiw , 'height' : '40px'});
            $('#wrap-main-menu-inner').css({'position' : 'absolute', 'clip' : 'rect(0,'+ mmiw + 'px,1000px,0)'});

            var owiw = mmow - mmiw;
            var onNav = false;
            $('#wrap-main-menu .next').mouseover(function(){
                onNav = true;
                var moveMenu = setInterval(function(){
                    var left = parseInt( $('#menu-main-menu').css('left').replace( 'px','') );

                    if( Math.abs( left ) <= owiw && onNav  ){
                        $('#menu-main-menu').css({left : "-=10"});
                    } else {
                        clearInterval( moveMenu );
                    }
                },50);
            }).on('mouseout',function(){
                onNav = false;
            });

            $('#wrap-main-menu .back').mouseover(function(){
                onNav = true;
                var moveMenu = setInterval(function(){
                    var left = parseInt( $('#menu-main-menu').css('left').replace( 'px','') );

                    if( left < -1 && onNav  ){
                        $('#menu-main-menu').css({left : "+=10"});
                    } else {
                        clearInterval( moveMenu );
                    }
                },50);
            }).mouseout(function(){
                onNav = false;
            });
        };
    }

    fixmainmenu();

    $(window).resize(function(e){
        fixmainmenu();
    });
    // end fix main menu
})(jQuery);
</script>

Regards,
Dominic

Hi, Dominic

This doesn’t seem to work. Is there any way to have to off canvas navigation mode start at a larger screen size?

Thanks,

Adrian

please add the following code to the “Header Script”

<style>
#wrap-main-menu .control {
    position: absolute;
    margin-top: 5px;
    z-index: 9999;
    text-align: center;
    color: #000;
    background: #fff;
    opacity: 0;
    border-radius: 50%;
}

#wrap-main-menu .control i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: block;
    cursor: pointer;
}

#wrap-main-menu .control i:before {
    cursor: pointer;
}

#wrap-main-menu .control i {
   cursor: pointer;
}

#wrap-main-menu:hover .control {
    opacity: 0.5; 
}

#wrap-main-menu .next {
   right: 10px;
}

#wrap-main-menu .back {
  left: 10px;
}

@media(min-width: 980px ) {
     .no-touch #wrap-main-menu-inner .nav {
          width: 9999px !important;
     }
}
</style>