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.

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

11 comments

  • Wow. Amazing, thank you so much.

    Finally a way to add motion.page's smooth scroll to Bricks and with David Browne's method in the comments it's possible to disable Bricks' built in smooth scroll.

    Just wondering why the article isn't named accordingly? At least add tags for motion.page and smooth scroll? 🙂

    Even though I'm a pro subscriber and I have been trying to find a solution for this forever I completely missed this. Found my way here from motion.page community forums where this was discussed in some comments area.

  • 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 a Reply to Michael Sherry (Cancel Reply)