Fixed top bar on mobile only

[Joseph]

Trying to get the top bar to be fixed, but on mobile only. Tried this code, but then the topbar crashes over/under the header/nav somehow.

@media (max-width: 768px) {
  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
  }
}

[David]

Hi there,

try this:

@media (max-width: 768px) {
    .top-bar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 100;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Joseph]

That worked like a charm! Hopefully I don’t break it. 🙂

[David]

Haha 🙂 You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts