Creating a Sticky Header (WPO 1.0)
Tagged: sticky header
-
AuthorPosts
-
-
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.
-
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
-
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)
-
-
Participant
Hi Chris, I have just tried to use the sticky header but it is still not working. Is there still a bug?
-
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
-
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)
-