Get rid of floating header on mobile devices

WordPress Business Themes Forums Responsive Themes Comparison Theme Get rid of floating header on mobile devices

Get rid of floating header on mobile devices

January 29, 2017
Chuck Chuck
  • 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 :)

    January 29, 2017 at 10:25 am
  • Josh
    Josh
    Super Guru 13,887 points

    Thanks for sharing Chuck :)

    January 30, 2017 at 2:40 pm
  • 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; }

    February 10, 2017 at 5:47 am

  • Harry
    Newbie 2 points

    This is what i’m looking for

    Thanks for sharing Chuck

    June 10, 2017 at 5:14 am
Viewing 4 posts - 1 through 4 (of 4 total)

Didn't find what you were after?

Chat with us now

or contact our support team