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

Related Tutorials..

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
Pro
Click-type Infinite Scroll in Bricks Builder

Click-type Infinite Scroll in Bricks Builder

This Pro tutorial provides the steps to set up "click to load more" posts using Infinite Scroll JS in Bricks builder. Step 1 Edit your…
Read more →
Categories: Bricks, Pro
Tags: Infinite Scroll
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

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…
Read more →
Categories: Bricks, Plugins, Pro
Tags: UI Pattern
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
Pro
New Ribbon for Posts in Bricks

New Ribbon for Posts in Bricks

This Pro tutorial provides the steps to display a "New" ribbon for posts that were published in the last x days in Bricks. Update: Added…
Read more →
Categories: Bricks, Pro
Tags: Ribbon
Pro
Inserting Random Ad Between Posts in Bricks

Inserting Random Ad Between Posts in Bricks

How to insert random ads (post type) in between regular posts on the blog page.
Read more →
Categories: Bricks, Pro
Tags: bricks/query/result
Pro
How to Combine Multiple Menus into Bricks’ Mobile Menu

How to Combine Multiple Menus into Bricks’ Mobile Menu

Bricks' native 'Nav Menu' element comes with a built-in mobile menu, which shrinks the menu down to a menu toggle button to open an offcanvas…
Read more →
Categories: Bricks, Pro
Tags: Mobile Menu, Nav Menu
Pro
CSS Grid for Posts Element in Bricks

CSS Grid for Posts Element in Bricks

The "Posts" element in Bricks has "Grid" as the default layout but the actual CSS it applies on the page feels hacky with negative margins…
Read more →
Categories: Bricks, Pro
Tags: CSS, CSS Grid, Posts
Download Area with HappyFiles

Download Area with HappyFiles

Aside from the series I'm currently writing on how to create custom galleries and sliders with HappyFiles, Metabox and Bricks, I have developed a snippet…
Read more →
Categories: Free, Plugins
Tags: HappyFiles