September 7, 2022/11 comments/

How to wrap main element in custom divs in Bricks

Categories: Bricks, Free
Tags: Hooks

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.

Sridhar Katakam

Sridhar Katakam is a Bricks enthusiast. He likes helping people by researching and solving problems related to WordPress and building websites.

Instant access to all 250+ Bricks code tutorials with BricksLabs Pro

11 comments

  • Mr. Motion Page
    9 months ago Reply

    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
    11 months ago Reply

    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?

    • A
      Sridhar Katakam
      11 months ago Reply

      URL?

      • Michael Sherry
        11 months ago Reply

        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
    1 year ago Reply

    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!

  • jacopo
    1 year ago Reply

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

    • A
      David Browne
      1 year ago Reply

      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

 

Related Tutorial(s)