在CSS中为移动视图修改/禁用jQuery代码

Question

I have sticky header in my website. When I tried to optimize my header for mobile, everything was ok but, when it became sticky it resize him or something like that so my navigation is not visible. I want to know is there any way to change jQuery code in css so my header doesn't resize when it became sticky .

Here is my code example: http://codepen.io/anon/pen/JKXYpa

Note: If you want to see where is the problem, just resize your browser on width < 480px.

Answer 1

The following CSS should work for you. You're doing a few things that are causing problems. Most importantly, your #wrapper declaration contradicts itself. You have declared a min-width that is larger than your max-width. min-width has to be less than max-width.

I've made a few other small adjustments including reducing the header font sizes in your media query for small screen sizes, to make the nav fit. Otherwise, it will wrap below the blue container.

    *{
        padding:0;
        margin:0;
    }

    /* Header */
    #header {
        transform: translateZ(10px);
        background-repeat: no-repeat;
        background-color:#3cb5f9;
        width: 100%;
        height: 80px;
        top:200;
        left: 0;
        z-index: 999;
        box-sizing:border-box;
        border-bottom:1px solid white;
    }
    #header nav {
        display: inline-block;
        float:right;
        line-height:80px;
    }
    #header nav a {
        margin-left: 25px;
        color: #fafafa;
        font-weight: 700;
        font-size: 18px;
        text-decoration:none;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    #header nav a:hover {
        color: black; 
    }
    #header img {
        line-height:80px;
        margin-top:14px;
        display:block;
        float:left;
        height:51px;
    }

    .clearfix{
        display: block;
        width:70%;
        clear:both;
        margin: 0 auto;
    }

    /*Mobile part*/
    @media screen and (max-width: 480px) {

        #header {
            width: 100vw;
            float:none;
        }

        p{ 
            font-size: 0.5em;
        }

        ::-webkit-scrollbar{
            display:none;
        } 

        #header nav{
            float:right;
        }
        #header nav {
            display: inline-block;
            float:center;
            line-height:80px;
        }
        #header nav a {
            font-size: 12px;
            margin-left: 10px;
        }
        #header nav a:hover {
            color: black; 
        }
        #header .clearfix {
            width: 95%;
        }
    }

    /* Other */

    #main{
        width: 100%;
        color:#3cb5f9;
        margin: 0 auto; 
    }

    .container{
        width:70%;
        margin: 0 auto;
    }

    #wrapper {
        max-width:1240px;
        height:2000px;
        color:#3cb5f9;
        margin: 0 auto; 
    }

    .home{
        width:100vw;
        height:600px;
        clear:both; 
    }