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.

  • Michael Sherry

    Thank you for this code it works great! The only issue I am having is now my header menu is unclickable. Any idea why this would be?

      • Whoops sorry!

        Here it is:
        https://titanfarm.staging.mysites.io/

        When prompted, enter the information below.

        Username: titanfarm
        Password: titanfarm

        So I enabled sticky header and then the link became clickable again. However, I am now having this new issue where the header/footer are overlapping the content. I added this code which fixed it on the homepage but all the other pages still have the issue.

        #brx-content {
        margin-top: 104px;
        padding-bottom: 425px; /* margin won’t work for footer */
        }

        What is the best way to deal with this? I tried asking on the motion.page forum but I’m getting radio silence.

        Thanks for your help!

  • Mocny Marketing Bartosz Błachnio

    Hi, is it possible to execute this code only for desktop and not on mobile? So it could be an alternative solution to killing the scrollsmoother on mobile via js… Thanks!

  • 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