6th Dec '23

How to Hide the Header Initially and Show It After Scrolling Down in Bricks

I wonder if there is a tutorial on making the header appear after the user has scrolled down a little? Like the opposite of Headroom.

This Pro tutorial provides the steps to hide the header in Bricks when the scroll position is at the top and reveal it after the user scrolls down a certain number of pixels.

Step 1

Add the following CSS:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Tagged:

Bricks

Header

Pro

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping others by researching and solving WordPress-related problems and building websites.

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro

Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

In this Pro tutorial we'll use GSAP's ScrollTrigger library in Bricks to create a section that will scroll horizontally across a number of full width…

Categories: Bricks, Pro

Tags: Animations, GSAP, Horizontal Scroll, ScrollTrigger

Pro

Oxygen’s Focus Section in Bricks

These are the steps to implement Focus Section, an Oxygen’s composite element, in Bricks.

Categories: Bricks, Pro

Tags: IntersectionObserver

Pro

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…

Categories: Bricks, Plugins, Pro

Tags: UI Pattern