Gab's

BLOG

Bricks Builder: How to Center Anchor Link Targets on the Screen

Bricks Builder: How to Center Anchor Link Targets on the Screen

If you’re using anchor links in Bricks Builder and want the linked section to appear in the middle of the screen—not stuck to the top—there’s an easy fix.

Instead of using JavaScript, you can simply apply a little CSS using the scroll-margin-top property.

Here’s how to do it:

  1. Select the section or element you want to scroll to in Bricks.
  2. Give it a class like .scroll-target (or any custom class name).
  3. Then add this CSS:
.scroll-target {
scroll-margin-top: 50vh; /* You can adjust this to control vertical offset */
}

That’s it!

What It Does:

  • scroll-margin-top tells the browser to leave space above the element when it’s scrolled into view.
  • 50vh means 50% of the viewport height, so the section appears centered.

This is especially helpful when:

  • You have a sticky header that hides the top of sections
  • You want smoother visual spacing for your anchor jumps
  • You’re building single-page layouts or navigation-driven sections

About Me

Gabriel Dominic Oxibillo

I’m an artist with a passion for programming, blending creativity with technical expertise to deliver impactful designs. Over 7 years, I’ve mastered graphic design, creating logos, websites, animations, 3D models, social media graphics, packaging, and more, while also excelling in video editing, visual effects, game assets, and promotional materials. Proficient in Adobe Creative Suite, I combine traditional and digital techniques, and my programming skills enhance my work, particularly in web development. Detail-oriented, adaptable, and eager to learn, I thrive in collaborative environments, bringing versatile skills and a sharp eye for aesthetics to any creative team.

About me

Connect with me on

Hire me on Upwork

Email me