WordPress.org

Forums

Customizr
Sticky Header on Android device (9 posts)

  1. Great Ottawa
    Member
    Posted 1 year ago #

    Hi,
    I used snippet of sticky header on the forum. I works well on PC. But it hides the top part of the page content. Is there any way to un-stick header on mobile device?
    Thanks,

  2. tomaja
    Member
    Posted 1 year ago #

    You need to wrap your "sticky" css code in @media query, e.g.

    @media all and (min-width:768px) {
    /* <your css goes here> */
    }

    Also see this snippet for clarification

  3. Great Ottawa
    Member
    Posted 1 year ago #

    Thank tomaja.
    I did:
    @media all and (min-width:768px) {
    .tc-header {
    position: fixed;
    top: 0;
    background-color: #fff;
    z-index: 100;
    width: 100%;
    }
    }
    The problem keeps the same as the top part is still hidden.

  4. tomaja
    Member
    Posted 1 year ago #

    Actually, it works. I just tested the code with Android mobile phone and with viewport resizer in normal desktop browser, header is fixed only for 768px wide screens and larger.
    It must be something else in your custom code that make that part of the site hidden. Can you share a link to your site ?

  5. Great Ottawa
    Member
    Posted 1 year ago #

    @tomaja, here you are lochuynh.com.
    I'm building it locally and just up yesterday for a test.
    In fact, there are 2 issues:
    1. The top part of slider images (1200x500) is hidden behind the header when shrinking the browser. It's nicely showed only with full screen browser or browser width bigger than 1200px
    2. More top part of the page is hidden when the NavBar goes down under the logo upon shrinking the browser.
    Thanks.

  6. tomaja
    Member
    Posted 1 year ago #

    Try to add overflow option, like

    .tc-header {
        background-color: #FFFFFF;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
        overflow: hidden;
    }

    Be aware that mobile browsers are not fully compatible with web standards.

  7. Great Ottawa
    Member
    Posted 1 year ago #

    @tomaja: the header is no more sticky with your overflow option

  8. Great Ottawa
    Member
    Posted 1 year ago #

    @tomaja: it works now. Thanks for that.

  9. Great Ottawa
    Member
    Posted 1 year ago #

    @tomaja: it doesn't work any more. Quite bizarre. Any other value for overflow option?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.