pHenomen pHenomen - 5 months ago 9
Javascript Question

Adapt/disable jQuery code for mobile view in css

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

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; 
    }
Comments