Creating a Sticky Header (WPO 1.0)

 | SubscribeFavorite

Tagged: 

Viewing 4 reply threads
  • Author
    Posts
    • #5358REPLY

      Chris F

      Keymaster

      Here is the CSS shown in the video:

      .sticky-header {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: #fff;
        z-index: 1000;
      }

      NOTE: This method only works with WPO 1.0. If you are using WPO 2.0 – Click Here.

       

    • #6274REPLY

      [email protected]

      Participant

      Hi Chris,
      I am trying to use this CSS with the WPOPTIMAL 2.0/2.0.0.2.
      But the stick header does not work.
      What am I missing?

      Jack

      • #6277REPLY

        Chris F

        Keymaster

        Hi Jack – There is currently an issue (bug) with this in the new internal Custom CSS Editor. We are working on it and will have a fix available for you soon.

        [UPDATE] Custom CSS Editor working again. ;o)

    • #6416REPLY

      Les

      Participant

      Hi Chris, I have just tried to use the sticky header but it is still not working. Is there still a bug?

    • #6429REPLY

      [email protected]

      Participant

      Hi Les and Chris,

      I can get the sticky header to work on the original WP OPtimal theme.
      But the WPO plugin does not want to load the sticky header CSS…
      Still a bug in there..

      Jack

    • #6453REPLY

      Chris F

      Keymaster

      Hi Guys –

      Unfortunately, the .sticky-header CSS does not work with version 2.0. However, with a slight adjustment and using a standard Bootstrap 5 class, it’s even easier (no custom class required).

      You can see how to do it and grab the new CSS here:
      https://members.wpoptimal.com/forums/topic/how-to-create-a-sticky-header-wpo-2-0/

      Thanks for your patience! ;o)