6th Dec '23
/
3 comments

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

In our Facebook group a user asked:

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 609 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Sticky Scrolling in Bricks Builder

Sticky Scrolling in Bricks Builder

Updated on 22 Apr 2024 This Pro tutorial provides the steps to fix elements in the viewport i.e., make them sticky while adjacent content in the section…
Read more →
Categories: Bricks, Pro
Tags: CSS
Plain HTML pages in Bricks

Plain HTML pages in Bricks

How to output only raw HTML on the page with no other WordPress/Bricks (or any other active child/parent theme)/plugins baggage.
Read more →
Categories: Bricks, Free
Tags: WordPress Page Template
How to create filters with IsotopeJS in Bricks (Part 1)

How to create filters with IsotopeJS in Bricks (Part 1)

This tutorial series will explore the IsotopeJS library's features inside the Bricks ecosystem.
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope
Pro
Custom WordPress Dashboard Page in Bricks

Custom WordPress Dashboard Page in Bricks

Updated on 10 Jul 2024 This Pro tutorial provides the steps to replace all the meta boxes of the WordPress admin dashboard page with the…
Read more →
Categories: Bricks, Pro
Tags: Dashboard
How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
Read more →
Categories: Bricks, Free
Tags: Filters, Isotope, Query Loop
Animated Border Hover Effect Buttons

Animated Border Hover Effect Buttons

Here's how can be implemented in HTML/WordPress/Bricks. Step 1 Add this CSS in your child theme's style.css or another appropriate location: Step 2 Add a…
Read more →
Categories: Free
Tags: Animations, CSS
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Read more →
Categories: Bricks, Free
Tags: Hooks
Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Read more →
Categories: Bricks, Pro
Tags: CSS Grid
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Read more →
Categories: Bricks, Pro
Tags: JavaScript