Support » Theme: Meteorite » Topbar should not disappear when scrolling

  • Resolved borisj

    (@borisj)


    Hi, when scrolling down the topbar disappears after a while. How can I prevent this behavior?

    Thanks, Boris

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author terrathemes

    (@terrathemes)

    Hi Boris, it depends a little bit on your page layout and styling. As there is no configuration for that you could start using this CSS:

    .topbar {
      position: fixed;
      width: 100%;
    }
    .nav-container.sticky.fixed {
      position: fixed;
      width: 100%;
      top: 45px;
    }

    Maybe the topbar also needs a background-color. Furthermore it could be useful to wrap that CSS into a media query to apply these styles only for certain viewports, e.g.

    @media only screen and (max-width: 991px) {
      ...
    }

    Please let me know if this already helps or if you need further assistance.

    Thread Starter borisj

    (@borisj)

    Thanks for the starter hint, terrathemes.

    Yes, a background for the topbar was necessary, as well as some other things (i.e. to prevent the nav-container to overlap with the topbar; to adjust the height of the site-header).

    .topbar {
      position: fixed;
      width: 100%;
    }
    .topbar .container {
      background-color: #dd9933;
    }
    .nav-container.sticky.fixed {
      position: fixed;
      top: 44px;
    }
    .nav-container {
      top: 44px;
    }
    .nav-placeholder  {
      height: 137px !important;
    }

    For smaller devices the nav-container is disappearing and the topbar is staying. This is intended.

    This all is working well when I’m logged out. When I’m logged in, there is a conflict with the admin-bar I still have to figure out who to solve. Any hint for that? Adjusting the “Adminbar styles”? How?

    Anyway, thanks for your support.

    Sunny regards from Germany

    Boris

    Theme Author terrathemes

    (@terrathemes)

    Hi Boris, you can catch the admin bar by using its id and adjust the top value by the height of the admin bar.

    #wpadminbar {
      .topbar {
        top: 32px;
      }
      .nav-container.sticky.fixed {
        top: 76px;
      }
      .nav-container {
        top: 76px;
      }
    } 

    Thread Starter borisj

    (@borisj)

    Thanks, terrathemes. I didn’t work out with your code but it really helped to find the solution.

    .admin-bar .nav-container.sticky.fixed {
        top: 76px !important;
      }

    Solved! Boris 🙂

    Theme Author terrathemes

    (@terrathemes)

    Oh sorry, I just noticed that I wrote LESS instead of CSS. But I am glad that you figured out the right rule. Thanks for your feedback and sharing your solution.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.