Hi,
I build website using hero with my video, integrity stack and home sticky bar 1 (on) with one page navigation.
The bar stays on the top of pages while scrolling down but it overlaps page’s content; as if the content goes under the bar.
I may miss something being a newcomer to X/X Pro. Please help me out.
Hey Alexandru,
The Bar’s Initial Position is Absolute which I believe you’ve set to achieve the overlay effect.
That overlay effect however is not good when used in combination with the Sticky Bar option because the bar’s background is transparent.
What you can do here is:
- First disable the sticky option of your bar
- Duplicate your bar
- Enable the sticky option of the new duplicated bar
- Set the background to a solid color or anything so that it’s not transparent
- (optional) Set the Trigger Offset or Trigger Selector to delay the display of the Sticky Bar.
The Trigger Offset should be a number. It’s how many pixels you need to scroll until the sticky bar is displayed.
The Trigger Selector should be a CSS selector. The Sticky Bar would be displayed once the element with the selector gets passed the top of the screen.
Hope that helps.
In short, your advice worked. The bar transparency was the key. I did your steps 1-4 and added Trigger Section (#) to delay the sticky bar.
One extra thing was “Hide Initially” mark to the sticky bar that took place on Home page.
So, in result the site got 2 similar bars with absolute position; bar1 - non-sticky; bar2 - sticky with delay and “Hide Initially” setting.
Thanks for prompt help!
Glad we could help and you’re most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.