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

Related Tutorials..

Pro
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Read more →
Categories: Bricks, Pro
Tags: Accordion, CSS, Query Loop
Pro
Top Bar Above Sticky Header in Bricks

Top Bar Above Sticky Header in Bricks

How to set up a top bar above sticky header in Bricks Builder so only the header remains sticky when scrolling.
Read more →
Categories: Bricks, Pro
Tags: Header
Pro
Ken Burns Background Slideshow in Bricks

Ken Burns Background Slideshow in Bricks

Setting up a hero section, having images that pan and move as a background slideshow with content on top.
Read more →
Categories: Bricks, Pro
Tags: Slideshow
Pro
Horizontal Scrolling Sections in Bricks Using GSAP’s ScrollTrigger

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…
Read more →
Categories: Bricks, Pro
Tags: Animations, GSAP, Horizontal Scroll, ScrollTrigger
Pro
Sticky Header Only For Visitors in Bricks

Sticky Header Only For Visitors in Bricks

A user asked: Anyone know if its possible to make the sticky of the header conditional only for logged out users? This Pro tutorial shows…
Read more →
Categories: Bricks, Pro
Tags: Sticky Header
How to add SVG icon as list item bullets

How to add SVG icon as list item bullets

Add this sample CSS: Replace brxe-list with the class of your ul element. Here's how you can generate the value of background-image property: Copy your…
Read more →
Categories: Free
Tags: CSS
How to add a resizable desktop navbar in Bricks

How to add a resizable desktop navbar in Bricks

This tutorial will show you how to add a "More" menu item when the navbar overflows on desktop.
Read more →
Categories: Bricks, Free
Tags: Menu, Nav Menu