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
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.
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 ?
@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 (1200×500) 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.
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.
@tomaja: the header is no more sticky with your overflow option
@tomaja: it works now. Thanks for that.
@tomaja: it doesn’t work any more. Quite bizarre. Any other value for overflow option?
