$(window).width(); not work at correct position

Question

Thats my code:

$(window).on("load scroll resize", function() 
{
    if( $( window ).width() >= 767)
    { 
        $( ".boxlogo" ).css("display","block");
        $( ".nav > li").css("margin-top","95px");`

        var s = $(window).scrollTop();
        if(s  > 1)
        {
            $( ".boxlogo" ).css("width","140px");
            $( ".navbar-color" ).css("background-color","#fff");
            $( ".dropdown-menu > li > a") .css("color","#000");
            $( ".dropdown > a ").css("color","#000");
            $( ".nav > li > a").css("color","#000");                    
            $( ".dropdown-menu > li > a") .css("text-shadow","2px 2px #fff");
            $( ".dropdown > a ").css("text-shadow","1px 1px #fff");
            $( ".nav > li > a").css("text-shadow","1px 1px #fff");
            $( ".nav > li").css("margin-top","62px");
            $( ".dropdown-menu").css("background-color","#fff");
        }
        else 
        {
            $( ".boxlogo" ).css("width","200px");
            $( ".navbar-color" ).css("background-color","transparent");                
            $( ".dropdown-menu > li > a") .css("color","#fff");
            $( ".dropdown > a ").css("color","#fff");
            $( ".nav > li > a").css("color","#fff");
            $( ".dropdown-menu > li > a") .css("text-shadow","1px 1px #000");
            $( ".dropdown > a ").css("text-shadow","1px 1px #000");
            $( ".nav > li > a").css("text-shadow","1px 1px #000");
            $( ".dropdown-menu").css("background-color","transparent");
            $( ".nav > li").css("margin-top","96px");
        }
    }//if windows
    else {
        $( ".boxlogo" ).css("display","none");
        $( ".nav > li").css("margin-top","5px");
    }
});//scroll resize*/`

The problem is that:

$( ".boxlogo" ).css("display","block");
$( ".nav > li").css("margin-top","95px");

not work when the windows width is 767px but at 784px...why?? thats more important because is the point when menu change style. I have try to use if( $( window ).innerWidth() >= 767) but the problem persist. I also try to do that with css @media but not work at all. I'm using bootstrap.

Try first adding a printout of the relevant properties you need. — FDavidov

Flyer53 Flyer53 · Accepted Answer · 2016-11-05T08:36:15

Instead of using $(window).width() or something similar you could try the property document.documentElement.clientWidth which returns the document width (without scrollbar). At least this works for me in a similar case and across browsers as far as I can say.

$(window).width(); not work at correct position

1 Answers