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.
11 comments
Mr. Motion Page
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.
Sridhar Katakam
Created a new post.
https://brickslabs.com/how-to-disable-smooth-scroll-in-bricks/
Mr Motion Page
Great!
Good to have it like that. There is also a closed thread on the Bricks Forums about disabling the native smooth scroll and it's closed without this correct answer.
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?
Sridhar Katakam
URL?
Michael Sherry
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!
Sridhar Katakam
Possible using JS but not with PHP.
https://webdevetc.com/blog/matchmedia-events-for-window-resizes/
jacopo
Hi, is it possible to disable bricks smooth scroll? i think its messing with gsap smooth scroller? thx
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
jacopo
Thanks a lot, this worked