50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

How to wrap main element in custom divs in Bricks

Looking to wrap the main element that is between header and footer with some custom div(s)?

Bricks provides ample hooks throughout its codebase.

Add this sample code in your child theme‘s functions.php or a code snippets plugin and tweak as needed:

add_action( 'bricks_after_header', function () { ?>
	<div id="smooth-wrapper"><div id="smooth-content">
<?php });

add_action( 'bricks_before_footer', function () { ?>
	</div></div>
<?php });

Before:

After:

Reference: wp-content/themes/bricks/header.php and wp-content/themes/bricks/footer.php.

  • Hi, is it possible to disable bricks smooth scroll? i think its messing with gsap smooth scroller? thx

    • A
      David Browne

      You can do it by overriding the bricksSmoothScroll function.

      Go to Bricks settings > custom code > Body (footer) scripts

      The add (inside script tags)..

      window.bricksSmoothScroll = () => false

Leave your comment