Adrian Martinez
asked 7 years ago

Hi Dominic, How do I go about fixing this?

http://adrianlinks.com/wp-content/uploads/2013/08/nav.png.

Let me know what you think.

Thanks again!
Adrian

4 Answers
DominicStaff
answered 7 years ago

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

Regards,
Dominic

Adrian Martinez
replied 7 years ago

Thanks Dominic!

DominicStaff
answered 7 years ago

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

Adrian Martinez
answered 7 years ago

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

DominicStaff
answered 7 years ago

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>
Powered by DW Question & Answer Pro