| SubscribeFavorite

• Author
  Posts
• • OCTOBER 17, 2020 AT 4:33 PM#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.

     

  • JULY 11, 2021 AT 5:02 PM#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

    • JULY 12, 2021 AT 1:58 PM#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)

  • JULY 28, 2021 AT 12:46 PM#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?

  • JULY 29, 2021 AT 1:59 AM#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

  • JULY 31, 2021 AT 11:17 PM#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)