Get rid of floating header on mobile devices

  • Chuck
    Chuck
    Newbie
     
    70 points

    For those of you using the themes that have floating headers, please realize that they REALLY reduce the viewable window on smaller mobile devices. If you want to keep the floating header but get rid of it for mobile devices put this code in your Custom CSS box…

    @media (min-width: 0px) and (max-width: 480px) { .sticky { display: none; } }

    You can increase the max width to whatever you want. Personally, I set my to 740px. This takes care of an iphone 6 turned sideways.

    Of course, if you just want to stop it from floating on all devices, then the code is just…

    .sticky { display: none; }

    That’s it.

    You’re welcome :)


    Josh
    Josh
    Super Guru
     
    13,888 points

    Thanks for sharing Chuck :)


    Chuck
    Chuck
    Newbie
     
    70 points

    I just found something else out.

    Even though you use “display: none” in CSS, it’s still there, you just can’t see it. This hinders people’s ability to view your header whole mobile header menu in mobile devices. The menu just disappears completely when you scroll part way down the menu.

    So the way to get rid of the sticky header and stop this menu problem is is to use the following in css…

    .sticky { position: static; }

    not .

    .sticky { display: none; }



    Harry
    Newbie
     
    2 points

    This is what i’m looking for

    Thanks for sharing Chuck


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.