How to make the topheader area sticky too

Asked on December 14, 2016 in Customization.
Answered

Hi,

 

Just wondering how i would make the topheader sticky and have it appear too when scrolling down together with the header menu.

 

Any ideas?

 

Best regards,

B

Bunkerboy Layers User

Seems this forum is quite pointless… 3 answers formulated to the last 20 questions?

Is anyone from Layers even following this forum?

on December 16, 2016.

Hi there,

As outlined in our support policy, this is a community-driven forum. Layers team stop by on a voluntary basis. Most questions are answered in our main documentation, or you can contact us on Layers Messenger if you have a technical problem.

on January 17, 2017.
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on January 17, 2017. Best answer

    Sticking an element is done by adding “position: fixed;” to it’s CSS style.  If the header is already stickied, you also need to change the “top” value to make room for the top bar so it doesn’t overlap. something like:

    .header-secondary {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    }
    .header-sticky.is_stuck.is_stuck_show {
    top: 50px;
    }

    How to see the existing styling:

    CSS Styling Using the Browser Inspector & Customizer

    Understanding the Top Bar classes:

    Layers Framework: Top Bar

    Vail Joy Layers Team
    Reply